在C3.js或D3.js中创建自定义列表图表

Question

我正在尝试使用C3.js或D3.js创建自定义图表，但我不确定如何处理此问题。以下是图表应如何输出的示例......

我看过C3.js＆amp;提供的示例。 D3.js并发现某些图表在图表底部输入了数据的名称，例如..

有没有我可以覆盖这些以产生所需的图表或者我接近这个错误？我该如何创建此自定义列表图表？

Answer 1

这种列表图表可以很容易地用d3创建。您可以使用简单的数据对象来生成它。下面，我分别为左右创建了rects，然后添加了标签。右侧栏的颜色基于数据对象中的status字段。

看看这个小提琴：https://jsfiddle.net/qf9po0L5/

svg.selectAll("bar")
  .data(data)
  .enter().append("rect")
  .attr("x", 10)
  .attr("width", 200)
  .attr("y", function(d, i) {
    return i * 32
  })
  .attr("height", 30)
  .attr("fill", function(d, i) {
    return i % 2 ? "#83adef" : "lightblue";
  });

svg.selectAll("second-bar")
  .data(data)
  .enter().append("rect")
  .style("fill", function(d) {
    return d.status === 0 ? "red" : "green";
  })
  .attr("x", 212)
  .attr("width", 20)
  .attr("y", function(d, i) {
    return i * 32
  })
  .attr("height", 30);


var yTextPadding = 20;
svg.selectAll(".bartext")
  .data(data)
  .enter()
  .append("text")
  .attr("class", "bartext")
  .attr("text-anchor", "middle")
  .attr("fill", "white")
  .attr("x", 55)
  .attr("y", function(d, i) {
    return (i * 32) + 22;
  })
  .text(function(d) {
    return d.name;
  })
  .attr("fill", "black");