D3.js:在具有长格式数据的多系列折线图中的现有线上绘制点

Question

我使用了此处给出的图表示例: http://bl.ocks.org/natemiller/20f9bd99d1795e3a0b1c

但是，当尝试在单条线上绘制数据点时，它并没有显示出来。代码在这里:

var cities = svg.selectAll(".city")
        .data(data, function(d) { return d.key; })
    .enter().append("g")
        .attr("class", "city");

cities.append("path")   //adding paths
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { return color(d.key); });

cities.selectAll(".dot")   //adding dots
        .data(data, function(d) { return d.key; })
    .enter().append("circle")
        .attr("class","dualLineChart-dot1")
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.values); })
        .attr("r", 3.5)
        .on("mouseover", function(d){ 
            d3.select(this).style("fill", "blue");
        })
        .on("mouseout", function(){
            d3.select(this).style("fill", "white");
        });    

CSS部分如下:

.line {
     fill: none;
     stroke-width: 1.5px;
 }

.dot {
     fill: white;
     stroke: steelblue;
     stroke-width: 1.5px;
}

Answer 1

您需要进行一些更改才能使其正常工作:

1. 确保您的类(class)名称一致:将 cities.selectAll(".dot") 更改为 cities.selectAll(".dualLineChart-dot1") 以匹配您稍后分配几行的类(class)属性
2. y 访问器是 d.temp，而不是 d.values，所以你应该有 .attr("cy", function(d) { return y(d.temp); }) 获取 y 值
3. 最重要的是，您应该改变获取点数据的方式。因为 cities 变量已经是一个数据数组(按城市拆分)，您只需要使用 .data(function(d) { return d.values; })，而不是使用 .data(data, function(d) { return d.values; })

这是工作代码:

cities.selectAll(".dualLineChart-dot1")   //adding dots
    .data(function(d) { return d.values; })
    .enter().append("circle")
    .attr("class","dualLineChart-dot1")
    .attr("cx", function(d) { return x(d.date); })
    .attr("cy", function(d) { return y(d.temp); })
    .attr("r", 3.5)
    .on("mouseover", function(d){ 
        d3.select(this).style("fill", "blue");
    })
    .on("mouseout", function(){
        d3.select(this).style("fill", "white");
    });