d3js - 정렬 가능한 그룹 막 대형 차트

Question

전체 공개 : 저는 프로그래밍에 익숙하지 않지만 d3 및 javascript에 익숙합니다.

Grouped Bar Chart Example과 Sortable Bar Chart Example을 결합하려고합니다. 총 51 개의 3 가지 변수 그룹이 있습니다. 나는 상자를 선택하여 Response 변수에 의해 데이터를 주문 할 수 있도록하려는

State,Response,Predicted,Difference 
1,0.0526,0.0983,0.0456 
2,0.1161,0.1093,0.0068 
5,0.0967,0.1035,0.0067 
4,0.0998,0.0942,0.0055 
6,0.0888,0.0957,0.0069 

: 여기 당신이 원하는 경우 내 데이터 세트의 절단 된 형태의 코드를 실행하는 데 사용할 수 있습니다. 지금은 x 축 레이블을 적절하게 움직일 수는 있지만 막대를 움직일 수는 없습니다. 이 시점에서 나는 내 데이터에 따라 change() 함수의 변수 이름을 변경했습니다. transition.selectAll(".state") 함수를 state2으로 저장 한 다음 state2.selectAll(".rect")을 사용하여 사각형의 x 좌표를 수정했지만 시도해도 아무데도 인식되지 않습니다.

여기 내 코드가 있습니다 (주로 위에 링크 된 예제에서 복사 됨). 관련 기능이 끝났습니다.

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 1000 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom, 
    code = ""; 

var x0 = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

var x1 = d3.scale.ordinal(); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var color = d3.scale.category10(); 

var xAxis = d3.svg.axis() 
    .scale(x0) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickFormat(d3.format(".0%")); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("data.csv", function(error, data) { 
    var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; }); 

    data.forEach(function(d) { 
    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; }); 
    }); 

    x0.domain(data.map(function(d) { return d.State; })); 
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]); 
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Prevalence"); 

    var state = svg.selectAll(".state") 
     .data(data) 
    .enter().append("g") 
     .attr("class", "g") 
     .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; }); 

    state.selectAll("rect") 
     .data(function(d) { return d.ages; }) 
    .enter().append("rect") 
     .attr("width", x1.rangeBand()) 
     .attr("x", function(d) { return x1(d.name); }) 
     .attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }) 
     .style("fill", function(d) { return color(d.name); }); 

    d3.select("input").on("change", change); 

    var sortTimeout = setTimeout(function() { 
    d3.select("input").property("checked", true).each(change); 
    }, 2000); 

    var legend = svg.selectAll(".legend") 
     .data(ageNames.slice().reverse()) 
    .enter().append("g") 
     .attr("class", "legend") 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

    legend.append("rect") 
     .attr("x", width - 18) 
     .attr("width", 18) 
     .attr("height", 18) 
     .style("fill", color); 

    legend.append("text") 
     .attr("x", width - 24) 
     .attr("y", 9) 
     .attr("dy", ".35em") 
     .style("text-anchor", "end") 
     .text(function(d) { return d; }); 

    function change() { 
    clearTimeout(sortTimeout); 

    // Copy-on-write since tweens are evaluated after a delay. 
    var x2 = x0.domain(data.sort(this.checked 
     ? function(a, b) { return b.Response - a.Response; } 
     : function(a, b) { return d3.ascending(a.State, b.State); }) 
     .map(function(d) { return d.State; })) 
     .copy(); 

    var transition = svg.transition().duration(750), 
     delay = function(d, i) { return i * 50; }; 

    var state2 = transition.selectAll(".state") 
     .delay(delay) 
     .attr("x", function(d) { return x2(d.State); }); 

    transition.select(".x.axis") 
     .call(xAxis) 
     .selectAll("g") 
     .delay(delay); 
    } 
}) 

도움을 주시면 감사하겠습니다. 지금까지 SO와 Google을 검색하는 방법을 찾지 못했습니다.

Answer 1

정렬 할 때 그룹화를 유지하려고한다고 가정합니다. 귀하의 그룹은 g 요소에 포함되어 있으므로 그룹의 좌표를 조정하면됩니다. 즉, 그룹을 이동하는 코드는 누적 막 대형 차트로 시도한 것과 같이 같습니다.

svg.selectAll("g.g") 
    .transition().duration(750) 
    .delay(delay) 
    .attr("transform", function(d) { return "translate(" + x2(d.State) + ",0)"; }); 

Answer 2

Am 누적 형 차트를 정렬하려면 Stacked Bar Chart

 function change() { 
     // Copy-on-write since tweens are evaluated after a delay. 
     var x0 = x.domain(data.sort(this.checked 
      ? function(a, b) { return b.noncomplete - a.noncomplete; } 
      : function(a, b) { return d3.ascending(a.moduleName, b.moduleName); }) 
      .map(function(d) { return d.moduleName; })) 
      .copy(); 

     var transition = svg.transition().duration(750), 
      delay = function(d, i) { return i * 60; }; 

     transition.selectAll(".moduleName") 
      .delay(delay) 
      .attr("transform",function(d, i) { return "translate(" + (x0(d.moduleName)) + ",0)"; }); 

    transition.select(".x.axis") 
      .call(xAxis) 
      .selectAll("g") 
      .delay(delay); 
     }