在C3.js或D3.js中創建自定義列表圖表

Question

我正嘗試使用C3.js或D3.js創建自定義圖表，但我不確定如何處理此問題。下面是如何圖表應該輸出...

我看了一下由C3.js & 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");