binding of array elements in d3.js

Question

Basiclly I have an Array of some Strings and I want to bind each of this strings to an circle. Then when I hover over the Circle I want to display these strings in a tooltip.

So this is my Array:

var node = [
        "Hallo Hallo Hallo Hallo Hallo Hallo Hallo",
        "foobarbaz",
        "This is a short text",
        "Changed some things on the folder structure and added some functions to the convert.c file",
    ];

Then there is my Tooltip which displays a html text...

var tooltip = svg.append('foreignObject')
        .attr('x', 50)
        .attr('y', 50)
        .attr('width', 200)
        .attr('height', 300)
        .style("visibility", "hidden")
        .append("xhtml:body")
        .html('<div style="width: 150px;">Example</div>');

And now I want to create my circles over a for loop, append the data to them and let the tooltip display the right data on a mouseover:

for (var i = 0; i < 4; i++) {

    svg.append("circle")
        .data(node[i])
        .attr("cx", 100*i+250)
        .attr("cy", 100)
        .attr("r", 10)
        .attr("fill", "steelblue" )
        .on("mouseover", function(d){
            return tooltip.style("visibility","visible")
                .html('<div style="width: 150px;">'+d+'</div>');
        }).on("mouseout", function(){
            return tooltip.style("visibility", "hidden");
        });
    }

But for some reason the result is not the whole string when I hover over the points it is just the fist character of the string. I am obviously missing something here...

Use .datum() instead of .data(). You really shouldn't be using a loop here though but D3's selections and data matching. — Lars Kotthoff
– Lars Kotthoff, Commented Sep 17, 2014 at 20:30
Ok i sovled it with the answer of Oleg. I modified the solution a bit: var circles = svg.selectAll("circle") .data(node) .enter()... — TM90
– TM90, Commented Sep 17, 2014 at 21:13

Oleg · Accepted Answer · 2014-09-17 21:06:15Z

2

D3 expects you to provide an array of values, such as .data([1,2,3,4]). You are passing in strings instead. So, D3 tries to match individual characters of a string (because a string, just like an array, can be iterated over) to the elements of the selection. In this case there's already one element, so it will assign to it the __data__ property equal to the first character of the string. The rest of the characters will go to the enter selection.

As Lars Kotthoff mentioned in his comment, you shouldn't be using for loops when working with D3. Instead, try something like this:

svg.selectAll('circle') // empty (yet) selection of circles
  .data(node) // apply data to the empty selection, where node is your array of strings
  .enter() // same as "for all entering (new) elements... "
    .append('circle') // creates as many circles as there are elements in node array
    .attr('cx', function (d, i) {
        // d is "Hello...", "foobarbaz", "This is a short text", etc.
        // i is 0, 1, 2, 3
        return 100 * i + 250; // dynamic, index-dependent x
    })
    .attr('cy', 100) // constant y value across all elements
    .on('mouseover', function (d) {
      console.log(d);
    });

edited Sep 17, 2014 at 21:06

answered Sep 17, 2014 at 20:39

Oleg

9,4092 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TM90 Over a year ago

Ok but how can I than access the iterator?

Oleg Over a year ago

You don't need to access the iterator. .data([1,2,3]).enter() is similar to [1,2,3].forEach(). It does the iteration for you (and computes a data join, so it's like iteration on steroids).

TM90 Over a year ago

I want to place the circles in with the same distance depanding on the element id so actually need the iterator.

Oleg Over a year ago

attr, among other methods, can take a function as the second argument and D3 passes in the datum and the index of the currently iterated element. The returned value is assigned to the attribute. See updated code in answer.

Collectives™ on Stack Overflow

binding of array elements in d3.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related