d3.js가 포함 된 계층화 된 막 대형 차트

계층화 된 막 대형 차트라고 불리는 막 대형 차트 내부에 막 대형 차트를 만들려고합니다. 샘플 코드는 다음과 같습니다.d3.js가 포함 된 계층화 된 막 대형 차트

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    </head> 
<body> 
    <script> 
     var dataArray = [10, 20, 40, 60]; 
     var canvas = d3.select("body").append("svg").attr("width", 500).attr("height", 500); 

     var bars = canvas.selectAll("rect").data(dataArray).enter().append("rect").attr("width", function(d){ 
      return d * 10; 
     }).attr("height", 30).attr("y", function(d, i){ 
      return i * 35; 
     }).attr("fill", "blue").attr("fill-width", "green"); 

     canvas.append("text").text(function(d){ 
      return d; 
     }).attr; 



     var dataArray1 = [5, 10, 20, 30]; 

     var bars1 = canvas.selectAll("rect").data(dataArray1).enter().append("rect").attr("width", function(d){ 
      return d * 7; 
     }).attr("height", 20).attr("y", function(d, i){ 
      return (i*35) + 5; 
     }).attr("fill", "red").attr("fill-width", "black");; 

    </script> 
</body> 
</html>

여기 bar 및 bar1은 svg 컨테이너에 표시된 막대 차트입니다. 내 문제는 길이가 긴 막대가 보이고 작은 막대가 보이지 않는 경우입니다. 하지만 아래 그림처럼 보일 수 있도록 더 긴 막대 안에 작은 막대를 배치하려고합니다. enter image description here .

하지만 그렇게 할 수 없습니다. 더 긴 막대 차트 코드에 주석을 달면 더 작은 막대가 표시됩니다. 이것에 대한 도움이 필요하십니까? 감사합니다.

출처

2014-04-02 sakthisundar

가능한 해결책은 example at jsbin입니다.

배열의 길이가 변경되지 않아서 enter()에 추가 할 것이 없었습니다. 새로운 요소를 만들 수 있도록 첫 번째 배열을 확장해야합니다.

var dataArray1 = [5, 10, 20, 30]; 
var offset = dataArray1.length; 
dataArray = dataArray.concat(dataArray1); 

var bars1 = canvas.selectAll("rect") 
// .data(dataArray1) 
    .data(dataArray) 
    .enter() 
    .append("rect") 
     .attr("width", function(d){ 
      return d * 7; 
     }) 
     .attr("height", 20) 
     .attr("y", function(d, i){ 
      return ((i - offset)*35) + 5; 
     }) 
     .attr("fill", "red"); 
     //.attr("fill-width", "black");

업데이트 : 적은 변화 또 다른 해결책은베이스와 추가 된 바 구별 할 class 속성을 추가합니다. example at jsbin을 참조하십시오.

var bars = canvas.selectAll("rect") 
    .data(dataArray) 
    .enter() 
    .append("rect") 
     .attr('class', 'base') 
     ... 

var dataArray1 = [5, 10, 20, 30]; 

var bars1 = canvas.selectAll("rect.addon") 
    .data(dataArray1) 
    .enter() 
    .append("rect") 
     .attr('class', 'addon') 
     ...

출처

2014-04-02 08:06:56

참고 : 'fill-width'는 무엇인지 모르겠으므로 주석 처리했습니다. –

작은 세부 사항 : 너비에 대한 배율 (값의 실제 표시)은 값을 비교할 수 있도록 양쪽 차트에서 동일해야합니다. – FernOfTheAndes

d3.js가 포함 된 계층화 된 막 대형 차트

답변

관련 문제