javascript - チャートの線を一連のドットに置き換える方法は?

Question

@mbostock で説明されている「再利用可能なチャート」アプローチを使用しようとしていますが、線 ( <path>) を使用するとすべて問題ありません。ただし、ドット ( <circle>) を使用しようとすると、1 つの要素のみがグラフに追加され、適切な形式ではありません (間違ったcxand cy)。

私の試みたコードは、 fiddle の 50 ～ 55 行目です。

Answer 1

great work on leveraging the reusable chart API!

In order to work with circles, the data needs to be bound to the collection of circles as well. There are a variety of ways you can take a look at selections for more information (search for array of arrays for the tricky bit that would give you some other insight on how to do it differently).

http://jsfiddle.net/7rdU7/

Above is a fix made to your example, keeping it simple and easy to understand what the differences are.

g.selectAll('.circle').data(data).enter().append("circle")
            .attr("class", "dot")
            .attr("cx", function(d) {return xScale (d.date); })
            .attr("cy", function(d) {return yScale (d.ySpeed); })
            .attr("r", function(d) {return rScale (d.xSpeed); });

If you are looking to transition between one visualization (a line) to a set of points. This is where it becomes a very tricky game of figuring out how to create a set of varying sized circles all leveraging an svg:path element. If that's the case you should look at the source of the crossfilter example to see how it is done to create several varying bar charts, though I really don't know if this is the ideal way to work with it.

Answer 2

パスを変更する代わりに、パスの描画方法を変更します。

デモ: http://jsfiddle.net/2DDuH/5/

 

.line {
  fill: none;
  stroke: #000;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-dasharray:0 20
}

より太いストローク、丸いライン キャップ、および 0px の後にギャップが続くように「描画」する破線を使用することにより、パスは一連の円でストロークされます。あなたstroke-widthの円の直径を制御します。

必要に応じて、任意の複雑な dasharray を提供して、それらを不均等に配置することができます。たとえば、 を試してください0 20 0 40 0 6 0 30 0 15 0 30。