1

私のデータセットをサポートするために、少し変更を加えた複数シリーズの折れ線グラフコードがあります。これが私がやりたいことであり、私が見た解決策は私にとって適切に機能していないようです。ライン上の各ポイントに要素 (円、四角形、非表示など) をオーバーレイして、mouseoverそのポイントに要素をアタッチして、d.time、d.jobID、およびその量を含むデータを含むボックスを表示できるようにしたいと考えています。それは平均とは異なります。可能であれば、平均を表すために描かれた 2 本の線ではなく、主線 (変化する線) に対してのみこれを行うソリューションを希望します。ここに、目視検査用にそのままのグラフの写真があります。それがうまくいかない場合は、私もそれを添付しました。

以下のコードを少し投稿しました。

d3.tsv("values.tsv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "time" && key !==   "jobID"; }));

data.forEach(function(d) {
  d.time = parseDate(d.time);
  d.jobID = parseInt(d.jobID);
});

var points = color.domain().map(function(name) {
return {
  name: name,
  values: data.map(function(d) {
    return {time: d.time, jobID: d.jobID, value: parseFloat(d[name],10)};
  })
};
});

....

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 7)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("mbps");

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

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

point.append("text")
  .datum(function(d) { return {name: d.name, jobID: d.jobID, value: d.values[d.values.length - 1]}; })
  .attr("transform", function(d) { return "translate(" + x(d.value.time) + "," + y(d.value.value) + ")"; })
  .attr("x", 6)
  .attr("dy", ".7em")
  .text(function(d) { return d.name; });
});

私の実装で機能するかどうかを確認するためだけに、次のコードを既に試しました。

point.append("svg:circle")
     .attr("stroke", "black")
     .attr("fill", function(d, i) { return "black" })
     .attr("cx", function(d, i) { return x(d.time) })
     .attr("cy", function(d, i) { return y(d.value) })
     .attr("r", function(d, i) { return 3 });

D3.JS はかなり素晴らしい作品のように思えます。

編集：jsfiddle

4

1 に答える 1

2

トリックは、データをセレクションに再度渡し、その結果を操作することです。背景と例については、Mike のチュートリアルをご覧ください。

ここに円を追加するように jsfiddle を変更しました。より多くの情報を表示するためにsvg:title要素を追加したり、何か他のことを行ったりすることは簡単です。コードを変更してデータ ポイントを作成し、各要素に名前を含めることに注意してください。このように、選択のレベルを 1 つ追加するだけで済みます (すべてのポイントを同じように扱い、それらを 1 回のパスで追加します)。コード設計の観点からこれを解決するよりクリーンな方法は、2 つのレベルを追加することです。まず、個々の行のポイントを選択し (svg:g要素を追加してそれらをグループ化)、次にこのグループ内にポイントを追加します。 . ただし、これにより、コードがかなり複雑になり、理解が難しくなります。

于 2012-12-26T21:40:24.477 に答える