5

だから私はこのグラフの各データポイントに円を追加しようとしています:

http://bl.ocks.org/mbostock/3884955

これを行う方法について何か考えはありますか？ありがとう。

これが私が今試したことです：

var circles = focus.selectAll("g") 
    .data(values) 
    .enter() 
    .append("g"); 

circles.append("circle") 
    .attr("cx", function (d) { return d.date; }) 
    .attr("cy", function (d) { return d.temperature; }) 
    .attr("r", function (d) { return 4; });
4

1 に答える 1

9

特定の都市の各ポイントに円を追加できます。

city.append("g").selectAll("circle")
  .data(function(d){return d.values})
  .enter()
  .append("circle")
  .attr("r", 2)
  .attr("cx", function(dd){return x(dd.date)})
  .attr("cy", function(dd){return y(dd.temperature)})
  .attr("fill", "none")
  .attr("stroke", "black")

結果: http://bl.ocks.org/ChrisJamesC/5896521/943f325deacb4a533e086d56478c1e76b6c6b4bd

ちなみに、basis点が線から離れているように見えるため、この方法は補間では機能しません。補間が必要な場合は、さらに作業を行う必要があるかもしれませんが、曲線の各ポイントを強調表示することは、正確な位置が必要であることを意味するとは思えません。

編集: 円を線と同じ色にするには、parentNode のデータにアクセスする必要があります。

.attr("stroke", function(d){return color(this.parentNode.__data__.name)})

新しい結果: http://bl.ocks.org/ChrisJamesC/5896521/83d7c5c04f7d031d3c71b4d6fd5b5193366d9fed

于 2013-06-30T19:55:47.417 に答える