D3将点添加到多个堆积的折线图中

Question

I'm creating multiple line-graphs that are stacked by "symbol" from a csv-file.

This is how the csv looks-like:

symbol,date,price
Agency,2015/5/6,33
Agency,2015/5/7,29
Agency,2015/5/8,32
test,2015/5/6,23
test,2015/5/7,19
test,2015/5/8,22
example,2015/5/6,43
example,2015/5/7,49
example,2015/5/8,42

So for each symbol contained in the csv-file a separate graph gets drawn. This all works fine so far.

But I'm struggling to add dots to each line.

This is the part that's creating the dots (line 142 - 148 in my fiddle ):

var circles = svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
        .attr("r", 2)
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.price); })
        .style("fill", "black");

But this code creates the dots populated by the values of the last "symbol" off the csv and not separate for each "symbol" .

I researched a lot here on stackoverflow, but none of the solutions or hints I found worked for me.

In this example http://jsbin.com/isuris/1/edit?html,output I found this part:

// add circles
pathContainers.selectAll('circle')
.data(function (d) { return d; })
.enter().append('circle')
.attr('cx', function (d) { return xScale(d.x); })
.attr('cy', function (d) { return yScale(d.y); })
.attr('r', 3); 

So I tried to change line 143 of my fiddle http://fiddle.jshell.net/doyL1L0p/1/ like this:

.data(function (d) { return d; })

But this didn't work, the "wrong" dots disappear.

So I tried this:

.data(function (d) { return d.key; })

because the separate "symbol"-value gets displayed by using "d.key". But know I get this error in the console:

Unexpected value NaN for attribute cx
Unexpected value NaN for attribute cy

Then I tried to alter lines 146 and 147:

        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.price); })

but without success.

I tried many other posted "solutions" off stackoverflow and others I found in the web, but all without success again.

Can anyone please give me a hint on how to solve this?

Heres the fiddle again:

http://fiddle.jshell.net/doyL1L0p/1/

Answer 1

Based on some editing of your fiddle, it seems that they ARE actually being displayed... but they're out of range of the canvas. If you look at the outcome here , you can see that the newly added point near the top is displayed, on all of the graphs.

I'll see if I can work on a proper fix, because obviously this is not the desired behaviour.

UPDATE

It looks like the problem is that you aren't updating your domain when you display your dots, so they are using the last domain which was set (hence why only last show normally). In addition, you are displaying dots for the entire data set on each graph (although most of them are outside the domain).

I would actually recommend trying to parse your data into an array for each unique symbol, it make things much more straightforward for you. For example, you could simply set the domain using d3.extent .

SUMMARY

A couple of solutions spring to mind:

1. Setting up separate axes/domains per graph.

2. Putting your dots into ag element per symbol, then adding data to them via a nested selection.

This works, but you really should read up a bit more on (nested) selections. Ideally, you would probably want to separately generate each graph, out of scope of the others. This solution is badly designed, but hopefully it should help to give you an idea of how your code is working.