d3.js를 사용하여 json 데이터에서 가로 막 대형 차트를 만들 수 없습니다.

this을 기반으로 실행중인 막 대형 차트를 얻으려고합니다.d3.js를 사용하여 json 데이터에서 가로 막 대형 차트를 만들 수 없습니다.

<body> 
    </body> 
    <script> 
     var width = 960, height = 500; 
     var margin = {top: 20, right: 20, bottom: 30, left: 40}; 

     //data 
     var data = [ {"x":"A","y":0.15}, {"x":"B","y":0.10}, {"x":"C","y":0.35} ]; 

     //x and y Scales 
     var xScale = d3.scale.ordinal() 
      .rangeRoundBands([0, width], .1); 

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

     //x and y Axes 
     var xAxis = d3.svg.axis() 
      .scale(xScale) 
      .orient("bottom"); 

     var yAxis = d3.svg.axis() 
      .scale(yScale) 
      .orient("left") 
      .ticks(10, "%"); 

     //create svg container 
     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 + ")");   

     //create bars 
     d3.selectAll(".bar") 
      .data(data) 
      .enter() 
      .append("rect") 
      .attr("class", "bar") 
      .attr("x", function(d) { return xScale(d.letter); }) 
      .attr("width", xScale.rangeBand()) 
      .attr("y", function(d) { return yScale(d.frequency); }) 
      .attr("height", function(d) { return height - yScale(d.frequency); }); 

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

     //drawing the y axis on svg 
     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("Frequency"); 
    </script>

나는 모두 Y 축 만보고 있습니다. 내가 뭘 놓치고 있니?

출처

2014-04-21 John

코드에 3 가지 문제가 있습니다. 먼저, 저울의 도메인을 설정해야합니다. 있도록 .bar 요소를 선택할 때

xScale.domain(data.map(function(d) { return d.x; })); 
yScale.domain([0, d3.max(data, function(d) { return d.y; })]);

둘째, svg를 사용해야합니다 예에서, 그 작업을 수행하는 코드는 당신이 당신의 변수 이름과 데이터에 적응해야하는

x.domain(data.map(function(d) { return d.letter; })); 
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

입니다 새로운 바는 SVG에 추가됩니다 : 복사 및 붙여 넣기 할 때

svg.selectAll(".bar") 
    .data(data) 
    .enter() 
    // etc

마지막으로, 당신은 데이터 요소를 변경하는 것을 잊었다.

.attr("x", function(d) { return xScale(d.x); }) 
.attr("width", xScale.rangeBand()) 
.attr("y", function(d) { return yScale(d.y); }) 
.attr("height", function(d) { return height - yScale(d.y); });

전체 데모 here : 그것은 .x 및 .y을해야 할 때 귀하의 코드는 여전히 .letter 및 .frequency을 의미합니다.

출처

2014-04-21 17:50:04

감사합니다. 나는 당신의 데모 [여기] (http://jsfiddle.net/7Pm6f/1/) 전환을 추가하려고 어디 갈래. 그러나 그것은 효과가없는 것처럼 보입니다. – John

직사각형에는'cx' 또는'cy' 속성이 없습니다. 처음에 설정하는 속성 (및 축)을 업데이트해야합니다. http://jsfiddle.net/7Pm6f/2/ –

감사합니다. Transition()이 data()와 enter() 사이에 있어야 전환 효과가 발생하지만 코드가 놀랍도록 작동해야한다고 생각했습니다. :) – John

d3.js를 사용하여 json 데이터에서 가로 막 대형 차트를 만들 수 없습니다.

답변

관련 문제