0

我正在处理这个例子，我在一个简单的服务器上工作，但由于某种原因，当我在这里创建一个 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); });
});

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

任何提示将不胜感激，谢谢！

4

2 回答 2

0

数据好像有问题。它被解析成如下所示的对象：

{
    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”文件的内容并查看它的外观。

于 2013-09-23T20:30:26.020 回答
0

您可以查看我使用 Circle 创建多系列折线图的示例

在这里您可以将 X 轴从“结束”更改为“日期”，需要对代码进行更改。但是您可以获得在每个日期实施 Circle 的基本想法。在我的示例中，每一个都存在圆圈，但如果没有检票口，它会被隐藏。

请参阅此处的示例，

带圆形示例的多系列折线图

于 2017-09-13T06:29:59.320 回答