barChart svg渐变填充

Question

我知道即使仅使用D3，这也不是一件容易的事，但至少在网上有示例。

我的问题是：如何在dc.barChart中进行渐变填充？ 像ordinalColors之类的东西似乎只接受RGB值。

我想要做的是这样的操作，但要加上杠铃：

谢谢

Answer 1

好的，看起来我需要将'defs'放入renderlet中。 因此，代码将类似于：

.renderlet(function (chart) {

      const barBG = d3.select(divRef)
                      .select('svg')
                      .append('defs')
                      .append("linearGradient");


      barBG
        .attr("id", "barBg")
        .attr("x1", "0")
        .attr("x2", "0")
        .attr("y1", "200")
        .attr("y2", "00")
        .attr("gradientUnits", "userSpaceOnUse");

      barBG
        .append("stop")
        .attr("offset", "0%")
        .attr("stop-color", "rgb(31, 119, 180)")
        .attr("stop-opacity", "0.1");


      barBG
        .append("stop")
        .attr("offset", "100%")
        .attr("stop-color", "rgb(31, 119, 180)")
        .attr("stop-opacity", "1");

      chart.selectAll("g.x text")
        .attr('dx', '30')
        .attr('transform', "translate(-15,0) rotate(-90)")
        .attr('display', 'none');

      // chart.selectAll('.bar')
      //   .attr("fill", "url(#barBg)");
    })
    ;

然后，在色标中添加渐变的ID：

.ordinalColors(['url(#barBg)','rgb(255, 127, 14)'])