Question

我正在处理 this example，我在一个简单的服务器上工作但是由于某些原因，我在这里创建一个bl.ock时无法工作：http://bl.ocks.org/atmccann/6673536。我想在我的多系列折线图上的每个日期附加一个圆圈，并带有相应颜色的线条，这就是我所拥有的：

var network = svg.selectAll(".network")
  .data(networks)
  .enter().append("g")
  .attr("class", "network");

  console.log(networks)

  network.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { return color(d.name); });

  network.append("text")
  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
  .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.rating) + ")"; })
  .attr("x", 3)
  .attr("dy", ".35em")
  .text(function(d) { return d.name; });


   network.append("circle")
   .attr("r", 5)
   .attr("cx", function(d) { return d.date; })
   .attr("cy",function(d) { return d.rating; })
   .style("stroke", function(d) { return color(d.name); });
  .style("fill", function(d) { return color(d.name); });
});

但它没有正确地将圆圈附加到线条上。我意识到我的块没有多大帮助，因为它不起作用，但整个代码都在那里。

任何提示都将非常感谢，谢谢！

Answer 1

看起来数据有问题。它被解析成如下所示的对象：

{
    CBS: "9.86"
    CW: "13.959"
    FOX: "0"
    ION Television: "7.102"
    MyNetworkTV: "1.189"
    NBC: "0"
    PBS: "13.419"
    UPN: "0"
    WB: "4.207"
    date ABC: "2002"
}

看起来您的代码期望与此完全不同，因此您应该查看“data.tsv”文件的内容并查看其外观。

Answer 2

您可以看到我使用Circle

创建多系列折线图的示例

在这里你可以改变＆＃34;＆＃34;的X轴。到＆＃34;日期＆＃34;需要对代码进行更改。但是你可以获得在每个日期实施Circle的基本想法。在我的例子中，每一个圈子都有，但如果那里没有检票口，它就会隐藏起来。

参见此处的示例，

Multi Series Line chart with circle example

d3js多系列折线图，附加圆圈

2 个答案: