13

x 値の範囲に応じて、グラフの下の領域をさまざまな色で塗りつぶそうとしています。たとえば、x 値が 0 から 10 の黄色、10 から 20 の赤などです。それを行う方法はありますか？

単一の塗りつぶし色の私のjavascriptは

var m = 80; 
var w = 900 - 3*m;
var h = 600- 3*m; 

var x = d3.scale.linear().range([0, w]);
var y = d3.scale.linear().range([h, 0]);
x.domain(d3.extent(data, function(d) { return d.time; }));
y.domain(d3.extent(data, function(d) { return d.points; }));

var line = d3.svg.line()
.x(function(d) { 
return x(d.time); 
})

.y(function(d) { 
return y(d.points); 
})

var graph = d3.select("#graph").append("svg:svg")
           .attr("width", w+3*m)
           .attr("height", h+3*m)
           .append("svg:g")
           .attr("transform", "translate(" + 1.5*m + "," + 1.5*m + ")");

var area = d3.svg.area()
.x(function(d) { return x(d.time); })
.y0(h)
.y1(function(d) { return y(d.points); });

graph.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area)
.style("fill","steelblue");

前もって感謝します！

4

1 に答える 1

12

これを行うには、基本的に 2 つのオプションがあります。

  • 色ごとに別々の領域を定義できます。
  • 単一の領域を定義し、グラデーションを使用してさまざまな色をシミュレートできます。

別のパスを描画する必要がないため、2 番目のパスはおそらく簡単です。現在行っているようにパスを塗りつぶすだけです。

グラデーションの場合、値に対応するストップ (色の変化) を定義する必要があります。特に、色が突然変化するように見せるには、同じ場所に 2 つのストップを導入する必要があります。グラデーションの詳細については、こちらをご覧ください。コードは次のようになります。

var grad = graph.append("defs")
     .append("linearGradient")
     .attr("id", "grad");
grad.append("stop").attr("offset", "0%").attr("stop-color", "yellow");
grad.append("stop").attr("offset", "10%").attr("stop-color", "yellow");
grad.append("stop").attr("offset", "10%").attr("stop-color", "red");
grad.append("stop").attr("offset", "20%").attr("stop-color", "red");
// etc

graph.append("path")
     .style("fill", "url(#grad)");

ストップの位置は、スケールによって決まります。

于 2013-10-01T13:07:45.440 に答える