d3弾丸チャートへのJSON入力としての色の取得

Question

次のD3箇条書きのチャートの例に従っています。範囲の色がJSON：http://www.d3noob.org/2013/07/introduction-to-bullet-charts-in-d3js.htmlにも含まれるように少し修正しようとしています。変更の理由は、私は色が動的であり、さまざまなものに依存する必要があるということです。

これはフォーラムの他の場所ですが、古いものと未解決のものです。私はd3の初心者であり、一般的なJavaScriptの経験はあまりありません。

ここに私が使用しているJSONがあります。 「rangecolor」は、いくつかの範囲があるため、将来はさまざまな色の配列になりますが、簡単にするために、まずは1つの色で始めることを試みます。

{ 
    "title":"Memory Used", 
    "subtitle":"MBytes", 
    "ranges":[256,512,1024], 
    "rangecolor": "red", 
    "measures":[768], 
    "markers":[900] 
    } 

今、それを使用する方法のアイデアを取得し、私はタイトルのために働い例を見て：

：

var title = svg.append("g") 
     .style("text-anchor", "end") 
     .attr("transform", "translate(-6," + height/2 + ")"); 

    title.append("text") 
     .attr("class", "title") 
     .text(function(d) { return d.title; }); 

問題は、私は得ることができないということです動作するように、次の

d3.selectAll(".bullet .range.s0") 
    .style("fill", function(d) { return d.rangecolor; }); 

次は作業を行います：

d3.selectAll(".bullet .range.s0") 
    .style("fill", function(d) { return "red"; }); 

そして、私はまた、タイトルにrangecolor値を抽出することができます。

title.append("text") 
     .attr("class", "title") 
     .text(function(d) { return d.rangecolor; }); //works - title is now "red" 

私のアプローチは見当違いのことなので、最高のJSONへの色の範囲を含む、それは次のようになり使用する方法上の任意のに役立つかもしれませんとても有難い。

Answer 1

問題はあなたがすべての弾丸を選択すると、それらにバインドされたデータが存在しないようにdであるが、ここでundefinedです：

d3.selectAll(".bullet .range.s0") 
    .style("fill", function(d) { return d.rangecolor; }); 

なぜ？

d3.selectAll('.something').data(somethingData) 
    .style('fill', function (d) { // d is defined }); 

このようにデータの結合が行われた理由はわかりません。これは、あなたがこれを行うとき：svg選択から

var title = svg.append("g"); 

title継承データを。 Mike Bostock explanationを参照してください。実際、私は自分自身がこの振る舞いを認識していなかったので、明示的にデータ結合を実行することをお勧めします。

コードの全体的な構造はわかりませんが、データ継承（タイトルなど）またはリファクタリングで明示的なデータ結合を使用すると、肌色のプロパティを適用できます。

Answer 2

私は次のチュートリアルは良いものではないと述べている経験豊富な開発者と話しました。ちょっと混乱していて、私は何かクリーナーを見つけようとしています。この点でトラブルシューティングが難しく、

正確な問題は、d3.selectAll（ "。bullet .range.s0"）。data（data）を使用して解決しました。