D3.jsのグラフを角丸にする

harada 29views 更新:2017年4月11日

角丸にしたい棒グラフなどの.append("rect")がかいてあるところに.attr("rx", 4).attr("ry", 4)を追加するだけで実現するようです。

    .attr("rx", 4)
    .attr("ry", 4)

追加例:

var chart = d3.select("#chart")
    .append('svg')
    .append("g")
    .data(pie(datas))
    .attr('width', width)
    .attr('height', height);

chart.selectAll("rect.right")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", 5)
    .attr("y", function (d) {
      return y(d.label) + 5;
    })
    .attr("rx", 4)
    .attr("ry", 4)
    .attr("class", "right")
    .attr("height", y.rangeBand() - 20)
    .attr("width", 0)
    .transition()
    .duration(500)
    .delay(function(d,i) { return 30 * i; })
    .attr("width", function (d) {
      return xFrom(d[rCol]);
    }); 

参考:d3.jsでrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加~主にsvgのこと

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません