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

我使用了下面给出的图表示例：

但是，当试图在各条线上绘制数据点时，它不会显示出来。代码如下所示：

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;
}

---

您需要进行一些更改以使其正常工作：

确保您的类名一致：更改

城市。选择All（“.dot”）

至

城市。选择All（“.dualLineChart-dot1”）

以匹配您稍后分配的类属性

y访问器是

d.temp

，而不是

d.values

，因此您应该使用

.attr（“cy”，函数（d）{return y（d.temp）；}）来获取y值

最重要的是，您应该改变获取点数据的方式。因为

cities

变量已经是一个数据数组（按城市划分），您只需要使用

.data（函数（d）{return d.values；}）

，而不是使用

.data（数据，函数（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");
    }); 

---

对于

circle

元素，您需要使用

cx

和

cy

属性更改

.attr（“d”，函数（d）{returnline（d.values）；}）

。我也尝试过了。我是这样使用它的：

.attr（“cx”，函数（d）{return x（d.date）；}）

.attr（“cy”，函数（d）{return y（d.values）；}

但它不起作用。类名后来被更改了，我犯了一个愚蠢的错误！非常感谢你的帮助！它起作用了！！：）