0

多数の業界の予測マージンのデータ セットがあります。つまり、各業界について、次の形式の確率分布があります。

 var data = [{'confidence': 0.0, 'rule': 'Agriculture', 'value': 45},
 {'confidence': 0.052631578947368418, 'rule': 'Agriculture', 'value': 46},
 {'confidence': 0.10526315789473684, 'rule': 'Agriculture', 'value': 47},
 {'confidence': 0.15789473684210525, 'rule': 'Agriculture', 'value': 48},
 {'confidence': 0.36842105263157893, 'rule': 'Agriculture', 'value': 52},
 {'confidence': 0.73684210526315785, 'rule': 'Information', 'value': 59},
 {'confidence': 0.78947368421052633, 'rule': 'Machine Learning', 'value': 60},
 {'confidence': 0.84210526315789469, 'rule': 'Machine Learning', 'value': 61},
 {'confidence': 0.89473684210526305, 'rule': 'Machine Learning', 'value': 62},
 {'confidence': 0.94736842105263153, 'rule': 'Machine Learning', 'value': 63}];

次のプロットを d3.js で再作成する必要があります。このプロットでは、各密度が棒グラフとしてプロットされ、線形カラー スケールが確率を表します。

視覚化の例

これまでの私の試みは、指定された各ポイントを高さ 1 の rect 要素としてプロットすることで構成されていました。

var rect = svg.selectAll("rect")
              .data(data)
              .enter()
              .append("rect")
              .attr("x", function(d, i) {
                  return x(d.rule) + margin.left;
              })
              .attr("y", function(d, i) {
                  return y(d.value) 
              })
              .attr("width", 100)
              .attr("height", 1) // change this !
              .style("fill", function(d, i) {
                  return color(d.confidence);
              });

この種の作品の下に見られるように、よりスムーズな視覚化を得るために長方形を補間する必要があります。

平滑化されていない

どうすればこれを達成できますか(または、私は完全に間違った道を進んでいますか)?

4

1 に答える 1

1

やりたいことを実現する 1 つの方法は、SVG グラデーションを使用することです。バーごとに、信頼値に対応するストップを使用してグラデーションを定義します (現在、四角形を生成しているのとほぼ同じ方法で生成されます)。次に、四角形を描画し、グラデーションをそれぞれの塗りつぶしとして割り当てるだけです。

このテクニックを使用して、ここの「線」を埋めました。

于 2013-03-13T12:13:45.437 に答える