Question

我正在将Vue与Britecharts一起使用，并且创建了水平条形图，然后将头像图像添加到名称标签右侧的ysis中。我进行了一些研究，发现D3 How to place image next to horizontal line text和this确实完成了我想达到的目标，但在D3中。

我想知道如何在Britecharts中做同样的事情。下面是我的示例代码。

Codepen： https://codepen.io/cooltaiwanesesam/pen/RwPYpbz

createHorizontalBarChart() {
    let barChart = new britecharts.bar(),
        margin = {left: 120, right: 20, top: 20, bottom: 30},
        barContainer = d3.select('.js-horizontal-bar-chart-container'),
        containerWidth = barContainer.node() ? barContainer.node().getBoundingClientRect().width : false;

    barChart
       .isHorizontal(true)
       .margin(margin)
       .width(containerWidth)
       .colorSchema(britecharts.colors.colorSchemas.britecharts)
       .valueLabel('percentage')
       .height(300);

    barContainer.datum(this.data.reverse()).call(barChart); 
}

Answer 1

问题已解决。共享代码以帮助有需要的人。

https://codepen.io/cooltaiwanesesam/pen/YzyXYWE

barChart
  .isHorizontal(true)
  .width(containerWidth)
  .height(300);

barContainer.datum(dataset).call(barChart);

d3.selectAll('.y-axis-group .tick')
  .each((d, i, list) => {        
    let img = barData.data.find((item) => item.name === d).img;

    d3.select(list[i])
      .append('image')
      .attr('x', -36)
      .attr('y', -22)
      .attr('width', 42)
      .attr('height', 42)
      .attr('xlink:href', img)
  });

参考：https://github.com/eventbrite/britecharts/issues/798感谢Britecharts的Marcos。

Britechart-如何将图标图像添加到图表y轴

1 个答案: