3

d3棒グラフを作成しようとしていますが、デザイナーが卑劣なため、各棒の左上と右上に丸い角が必要です。私はどこかに到達していると思いますが、私はそれを一線を越えてプッシュするために少しの助けを使うことができました。

まだd3とsvgについて学ぶ上り坂のカーブにあるので、明らかなことを見逃していないことを願っています。

私はrects（コメントアウトされたセクション）を使用してこの作業を成功させましたが、おそらくパスの描画方法に欠陥があります。topRoundedRect関数に引数として渡している無名関数（例：function（datum、index）{return x（index）;}）は、パスのd属性に追加される前に評価されておらず、評価されていません。理由を理解してください。したがって、次のようなエラーが発生します。

Error: Problem parsing d="Mfunction (datum, index) { return x(index); }3,function (datum) { return height - y(datum); }h34a3,3 0 0 1 3,3vNaNh-40vNaNa3,3 0 0 1 3,-3z"

あなたが提供できるどんなアドバイスも素晴らしいでしょう。以下のコード。

var data = [60.45,60.45,89.54,120.34,106.45,127.43];

var barWidth = 40;
var width = (barWidth + 10) * data.length;
var height = 500; 


var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum; })]).
  rangeRound([0, height]);

// add the canvas to the DOM
var barDemo = d3.select("body").
  append("svg").
  attr("width", width).
  attr("height", height);


function topRoundedRect(x, y, width, height, radius) {
    return "M" + (x + radius) + "," + y
       + "h" + (width - (radius * 2))
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - radius)
       + "h" + (0-width)
       + "v" + (0-(height-radius))
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius
       + "z";
}  

  /*
barDemo.selectAll("rect").
  data(data).
  enter().
  append("svg:rect").
  attr("x", function(datum, index) { return x(index); }).
  attr("y", function(datum) { return height - y(datum); }).
  attr("height", function(datum) { return y(datum); }).
  attr("width", barWidth).
  attr("fill", "url(#barGradient)");   */


  barDemo.selectAll("path").
    data(data).
    enter().append("path").
        attr("d", topRoundedRect(
            function(datum, index) { return x(index); },
            function(datum) { return height - y(datum); },
            barWidth,
            function(datum) { return y(datum); },
            3))
        .style("fill","#ffcc00")
        .style("stroke","none");
4

1 に答える 1

1

属性の引数は、データムとインデックスをパラメーターとして受け取る関数である必要があります。試す：

attr("d", function(datum, index) { 
    return topRoundedRect(    x(index), 
                              height - y(datum),
                              barWidth,
                              y(datum),
                              3);
})
于 2012-10-16T20:24:07.790 に答える