C3.js 또는 D3.js에서 사용자 지정 목록 차트 만들기

Question

C3.js 또는 D3.js을 사용하여 사용자 지정 차트를 만들려고하는데이 방법에 대해 잘 모릅니다. 아래 차트 출력 ...

내가 C3.js & D3.js에서 제공하는 예제를 살펴했고 차트의 일부는 데이터 입력의 이름을 남겼습니다 방법의 예입니다 예를 들어 차트의 바닥 ..에서

내가이 원하는 차트를 생산하기 위해 또는 내가 잘못이 접근하고 대체 할 수 있습니다 어떻게든지이 있습니까? 이 사용자 지정 목록 차트는 어떻게 만듭니 까?

Answer 1

이러한 종류의 목록 차트는 d3으로 쉽게 생성 할 수 있습니다. 간단한 데이터 객체를 사용하여 생성 할 수 있습니다. 아래, 왼쪽 및 오른쪽에 별도로 rect를 만든 다음 레이블을 추가했습니다. 오른쪽 막대의 색은 데이터 개체의 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");