3

私は、ニューヨークタイムズの最終的な政治大会の視覚化のような部分的に塗りつぶされた円を作成しようとしています：http ：//www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html

ここに画像の説明を入力してください

d3のclipPathsで見つけた2つの最も明確なコード例（https://gist.github.com/1067636およびhttp://bl.ocks.org/3422480）は、クリップパスごとに一意のIDを持つ個々のdiv要素を作成します次に、これらのパスを単一の要素に適用します。

これらの例から、データ値に基づいて要素のセット内の要素ごとに一意の円形のclipPathを使用して視覚化する方法を理解できず、効果を作成できます。

これが私がこれまでに持っているものです：

次の構造のデータが与えられます。

data = [        
    {value: 500, pctFull: 0.20, name: "20%"}, 
    {value: 250, pctFull: 0.75, name: "75%"},
    {value: 700, pctFull: 0.50, name: "50%"},        
]

1）データセット内のオブジェクトごとに円で力の図を作成します。円の面積は、オブジェクトの値から導出されます。

2）mbostockの例http://bl.ocks.org/3422480のアルゴリズムを使用して、各データポイントの比率（pctFull）からk（およびh）を計算します。

3）kを使用して、円の適切な領域をカバーする各データポイントの長方形を生成します。

各長方形の可視性をそれぞれの円に制限できれば、イラストは完成すると思いますが、これは私が立ち往生しているところです。私はたくさんのことを試しましたが、どれもうまくいきませんでした。

これがjsfilddleです：http：//jsfiddle.net/G8YxU/2/

ここに画像の説明を入力してください

4

1 に答える 1

7

ここで動作するフィドルを参照してください：http：//jsfiddle.net/nrabinowitz/79yry/

ここに画像の説明を入力してください

// blue circle
node.append("circle")
    .attr("r", function(d, i) {return rVals[i];})
    .style("fill", "#80dabe")                
    .style("stroke", "#1a4876");   

// clip path for the brown circle
node.append("clipPath")
    // make an id unique to this node
    .attr('id', function(d) { return "clip" + d.index })
  // use the rectangle to specify the clip path itself 
  .append('rect')
    .attr("x", function(d, i){ return rVals[i] * (-1);})
    .attr("width", function(d, i){ return rVals[i] * 2;})
    .attr("y", function(d, i) {return rVals[i] - (2  * rVals[i] * kVals[i]);})
    .attr("height", function(d, i) {return 2  * rVals[i] * kVals[i];});

// brown circle
node.append("circle")
    // clip with the node-specific clip path
    .attr("clip-path", function(d) { return "url(#clip" + d.index + ")"})
    .attr("r", function(d, i) {return rVals[i];})
    .style("fill", "#dabe80")                
    .style("stroke", "#1a4876");

  • url(IRI)要素のクリップパスを指定する唯一の方法は、属性で表記を使用することであるように見えますclip-path。つまり、ノードデータに基づいてクリップパスごとに一意のIDが必要になります。idのフォームclip<node index>を使用したので、各ノードは独自のクリップパスを取得し、ノードの他のサブ要素はそれを参照できます。

  • マイクの例に従うと、円ベースのクリップパスを作成するよりも、異なる色の2つの円を作成し、長方形自体をクリップパスに使用するのが最も簡単なように見えました。しかし、どちらの方法でもそれを行うことができます。

于 2012-09-12T22:11:51.300 に答える