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

Question

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

我看过C3.js&D3.js提供的例子，发现有些图表在图表底部有数据输入的名称，例如..

我是否可以通过某种方式覆盖这些以生成所需的图表，或者我是否错误地接近了这个？我将如何创建此自定义列表图表？

Answer 1

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

看看这个 fiddle：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");

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

Creating a Custom List Chart in C3.js or D3.js

html

javascript

jquery

d3.js

c3.js