First-time binding of data in d3.js did not occur

Question

First-time binding of data in d3.js did not occur

I need help analyzing the following dataset:

[{
    label: "ABC", p1: "23", p2: "3"
},
{
    label: "EF", p1: "4", p2: "10"
},
{
    label: "GV", p1: "5", p2: "15"
},
{
    label: "FD", p1: "9", p2: "5"
},
{
    label: "SDF", p1: "20", p2: "10"
},]

My attempt to visualize this data is through the use of the following code snippet:

var keys = ["p1", "p2"];

function draw(data) {
    var p = d3.select("body")
      .selectAll(".one")
      .data(d3.stack().keys(keys)(data))

    p.enter()
      .append("p")
      .attr("class", "one")

    var span = p
      .selectAll("span")
      .data(function(d) { return d})

    span
      .enter()
      .append("span")
      .html(function(d) { return d})

    span.exit().remove();
}

While the p Elements are successfully created, the span elements are not, highlighting an issue in my implementation.

My goal is to generate a span element for each object in the data array, but my current code is falling short. I seek assistance in resolving this discrepancy.

For reference, here is the link to the code on JSFiddle: https://jsfiddle.net/h2ujjo98/

javascript d3.js svg

Answer 1

Answer №1

You are currently working with a nested selection, and there are some improvements that can be made in your approach. Firstly, you don't need to re-bind the data to the nested element as it is automatically passed. Secondly, you should properly handle the enter, update, and exit selections for better efficiency. Below is a refactored version of your code:

// Update selection
var p = d3.select("body")
  .selectAll(".lol")
  .data(d3.stack().keys(keys)(data));

// Remove any elements being exited
p.exit().remove();

// Handle entering elements
var pEnter = p.enter()
  .append("p")
  .attr("class", "lol");

// Append a span to the entering elements
pEnter.append("span");

// Merge update and enter selections
p = pEnter.merge(p);

// Update the sub-selection of the update + enter selection
p.select("span").html(function(d) { return d });

Check out the updated JSFiddle here.

Answer 2

You are currently working with a nested selection, and there are some improvements that can be made in your approach. Firstly, you don't need to re-bind the data to the nested element as it is automatically passed. Secondly, you should properly handle the enter, update, and exit selections for better efficiency. Below is a refactored version of your code:

// Update selection
var p = d3.select("body")
  .selectAll(".lol")
  .data(d3.stack().keys(keys)(data));

// Remove any elements being exited
p.exit().remove();

// Handle entering elements
var pEnter = p.enter()
  .append("p")
  .attr("class", "lol");

// Append a span to the entering elements
pEnter.append("span");

// Merge update and enter selections
p = pEnter.merge(p);

// Update the sub-selection of the update + enter selection
p.select("span").html(function(d) { return d });

Check out the updated JSFiddle here.

First-time binding of data in d3.js did not occur

Answer №1

Similar questions

Tips for applying multiple style properties to an element using JavaScript

How can nextJS leverage async getInitialProps() method in combination with AWS S3?

When working with an array of objects in Vue.js, what is the optimal approach: replacing the entire array or modifying individual values?

Method not found in Angular

Leverage the Ajax response within a Jade template

The div remains unchanged when the button is clicked

Exploring the power of NodeJS modules through exports referencing

Can commands be loaded directly into spec.js files in Cypress instead of support/index.js?

Adjustable width (100%) and set height for SVG

Exploring Angular 1.5: A guide to binding a transcluded template to a component's scope

Troubleshooting the failure of the fetch function in my React application

show a fresh new page using react router

What is the typical approach of JavaScript frameworks towards the 304 not-modified response?

Navigate within a JSON object using an identifier to extract a particular value associated with that identifier

How can we determine if the return value from Object.values is an array or not, since it returns a JavaScript array without the brackets?

Ways to retrieve an isolated scope in a directive without utilizing a template

What is a method for saving a file from Chrome to a network drive using scripting language, even though it's currently functioning in IE?

In my attempt to simulate redis using jest and javascript, I've noticed that whenever I try to access redis.mock.instance[0], it consistently returns as empty

Steps for modifying the CSS class of an <a> tag with Jquery/Javascript

The tooltip callback in react-chartjs-2 is failing to function as expected