私はd3とJavaScriptを初めて使用するので、建設的なフィードバックをいただければ幸いです。2つのソース（GISSとHAD）から1880年から2010年までの気候データ（温度異常）をプロットすることを含むd3を学習するための実践例をモックアップしています。これまで、このデータを使用してd3で複数の折れ線グラフを生成しました。コードとデータはこちらhttps://gist.github.com/natemiller/0c3659e0e6a0b77dabb0
この例では、データは元々灰色でプロットされていますが、マウスオーバーすると各線の色が異なります。
2つの機能を追加したいと思います。
マウスオーバー時に、マウスオーバーした行が上になるように行を並べ替えて、基本的に行を並べ替えたいと思います。これには基本的にSVGを再プロットする必要があることを読み、これに沿ってコードを試しました
source.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.values); }) .style("stroke", "lightgrey") .on("mouseover", function() { if (active) active.classed("highlight", false); active = d3.select(this.parentNode.appendChild(this)) .classed("highlight", true); }) .style("stroke",function(d) {return color(d.name);}) .on("mouseout", function(d) { d3.select('#path-' + d.name) .transition() .duration(750) .style("stroke", "lightgrey") }) .attr("id", function(d, i) { return "path-" + d.name; });
ここで、.on（ "mouseover" ...コードは、現在の "moused-over"行を強調表示することを目的としています。私の例では機能していないようです。すべての行が最初に強調表示されてから、mouseover/で灰色に変わります。マウスアウト。誰かが私のコードを更新する方法を特定するのを手伝ってくれたら、マウスオーバーで行を並べ替えることができます。
線またはそのラベルのいずれかをマウスで押すと、線とラベルの色が更新されるように、線にラベルを付けることで遊んでいます。idを使って少し遊んだことがありますが、これまでのところ、テキストと線の両方で色を変更することはできません。1.線の上にマウスを置いてテキストの色を変更します。2。テキストの上にマウスを置いて線の色を変更します。2。線の上にマウスを置いて線を変更しますが、線とテキストの両方はありません。どちらかをマウスオーバーすると色が変わります。これは（IDを使用して）開始として機能するコードのセクションですが、パスを指定するだけで、テキストとパスを指定しないため、完全には機能しません。両方をd3.select（'＃path-'、'＃text-' ...とそのバリエーションに追加しようとしましたが、機能しないようです。
source.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.values); }) .style("stroke", "lightgrey") .on("mouseover", function(d){ d3.select(this) .style("stroke",function(d) {return color(d.name);}); }) .on("mouseout", function(d) { d3.select('#path-' + d.name) .transition() .duration(750) .style("stroke", "lightgrey") }) .attr("id", function(d, i) { return "path-" + d.name; }); source.append("text") .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 15]}; }) .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; }) .attr("x", 5) .attr("dy", ".35em") .style("stroke", "lightgrey") .on("mouseover", function(d){ d3.select('#path-' + d.name) .style("stroke",function(d) {return color(d.name);}); }) .on("mouseout", function(d) { d3.select('#path-' + d.name) .transition() .duration(750) .style("stroke", "lightgrey") }) .text(function(d) { return d.name; }) .attr("font-family","sans-serif") .attr("font-size","11px") .attr("id", function(d, i) { return "text-" + d.name; });
よろしくお願いします。私はd3とこのヘルプサーブに不慣れです。現時点では学習曲線が急ですが、この例とコードがかなり明確であることを願っています。それがない場合は、どうすれば改善できるかを教えてください。質問を再投稿できます。
本当にありがとう、
ネイト