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

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

确保您的班级名称一致：将cities.selectAll(".dot")更改为cities.selectAll(".dualLineChart-dot1")以匹配您稍后指定几行的班级attr
y-accessor为d.temp，而不是d.values，因此您应该.attr("cy", function(d) { return y(d.temp); })获取y值
最重要的是，您应该更改获取积分数据的方式。由于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");
    });

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

1 个答案: