在 dc.js 中绘制带圆角矩形的条形图答案

【问题标题】：Draw bar charts with rounded rectangles in dc.js在 dc.js 中绘制带圆角矩形的条形图
【发布时间】：2015-12-01 01:43:54
【问题描述】：

我正在尝试将圆角矩形添加到我在 dc.js 中创建的条形图中。我试过添加一个渲染器，但是没有用。然后尝试在 dc.renderAll() 调用之后添加这段代码：

dc.transition(svg.selectAll('rect'), chartProjectsCreatedChart.transitionDuration())
            .attr('rx', 5)
            .attr('ry', 5)

有趣的是，这为图例提供了一个圆角矩形，而不是单个图表条

，即使元素都具有“rx”和“ry”属性。

我看到 dc.heatmap 具有 xBorderRadius 和 yBorderRadius 属性，但它们似乎不适用于普通条形图。

谢谢

【问题讨论】：

好的。因此，这可以在 css 中更改，但必须专门针对 rect.bar
当我将它直接应用到the basic bar chart example 时它可以工作。但是，当我使用转换应用它时，它取消了原始转换（不确定您为什么要这样做），所以我必须直接应用属性，例如chart.selectAll('rect').attr('rx', 5).attr('ry', 5); 不确定这是否是您的问题的一部分。将它应用到 renderlet 或 pretransition 事件中也会更有意义，以便它适用于以后添加的任何新栏。或者是的，CSS 可能更好！
谢谢戈登。稍微跑题了，但你能不能指出我为 renderlet 功能提供了一个好的资源的方向 - 目前，我只是在破解它们，每当它成功时，我脸上都会带着惊讶的表情。
当然。这只是一个事件；您可能会在 Web 上找到另一种机制的旧示例。 Docs ; example

标签： d3.js dc.js

【解决方案1】：

D3.js V5 + DC.js 解决方案

chart.on('pretransition', (chart) => {
      const svg = chart.select('svg');

      // Bar Border Radius
      svg.selectAll("rect")
          .attr("rx", "5")
          .attr("ry", "5");
});

【讨论】：