2017-12-28 5 views
0

d3.js로 코딩하는 법을 배우려고합니다. 이 json 파일로 간단한 막대 그래프를 만들려고합니다. 파일에서 xaxis를 포맷하려고했습니다. 나는 d3.js API를 살펴 보았고 나는 여전히 길을 잃었다. 어떤 도움을 주셔서 고맙게 생각합니다. 여기 는 결과 스크린 샷d3js v4 막대 차트에서 xaxis를 늘리는 방법은 무엇입니까?

입니다 This image is for shorter xaxis points

이 출력이 보인다 여기

을 x 축에 coiming 점

This output results when more data points in xaxis

사람이 어떻게 데이터를 기반으로 X- 축 길이를 증가하는 저를 제안 할 수

좋은 내 코드는

.bar { 
 
     fill: #F39473; 
 
    } 
 

 
    .highlight { 
 
     fill: orange; 
 
    }
<!doctype html> 
 
<html> 
 
<head> 
 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
 
</head> 
 
<body> 
 
<svg width="900" height="500"></svg> 
 
<script> 
 

 
    var svg = d3.select("svg"), 
 
     top= 20, right= 20, bottom= 50, left= 70, 
 
     margin = 200, 
 
     width = svg.attr("width") - margin, 
 
     height = svg.attr("height") - margin; 
 

 
    var x = d3.scaleBand().range([0, width]).padding(0.4), 
 
     y = d3.scaleLinear().range([height, 0]); 
 
    var g = svg.append("g") 
 
      .attr("transform", "translate(" + 100 + "," + 100 + ")"); 
 

 
      d3.json("data.php", function(error, data) { 
 

 
       data.forEach(function(d) { 
 
        d.date = (d.date); 
 
        d.count = +d.count; 
 
       }) 
 

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

 
     g.append("g") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(d3.axisBottom(x)) 
 
     .append("text") 
 
     .attr("y", height - 250) 
 
     .attr("x", width - 100) 
 
     .attr("text-anchor", "middle") 
 
     .attr("stroke", "black") 
 
     .text("date"); 
 
     g.append("text") 
 
      .attr("transform", "rotate(-90)") 
 
      .attr("y", 0 - margin.left) 
 
      .attr("x",0 - (height/2)) 
 
      .attr("dy", "1em") 
 
      .style("text-anchor", "middle") 
 
      .text("count"); 
 
     g.append("g") 
 
     .call(d3.axisLeft(y).tickFormat(function(d){ 
 
      return d; 
 
     }).ticks(10)) 
 

 
     g.selectAll(".bar") 
 
     .data(data) 
 
     .enter().append("rect") 
 
     .attr("class", "bar") 
 
     .on("mouseover", onMouseOver) //Add listener for the mouseover event 
 
     .on("mouseout", onMouseOut) //Add listener for the mouseout event 
 
     .attr("x", function(d) { return x(d.date); }) 
 
     .attr("y", function(d) { return y(d.count); }) 
 
     .attr("width", x.bandwidth()) 
 
     .transition() 
 
     .ease(d3.easeLinear) 
 
     .duration(400) 
 
     .delay(function (d, i) { 
 
      return i * 50; 
 
     }) 
 
     .attr("height", function(d) { return height - y(d.count); }); 
 
    }); 
 

 
    //mouseover event handler function 
 
    function onMouseOver(d, i) { 
 
     d3.select(this).attr('class', 'highlight'); 
 
     d3.select(this) 
 
      .transition()  // adds animation 
 
      .duration(400) 
 
      .attr('width', x.bandwidth() + 5) 
 
      .attr("y", function(d) { return y(d.count) - 10; }) 
 
      .attr("height", function(d) { return height - y(d.count) + 10; }); 
 

 
     g.append("text") 
 
     .attr('class', 'val') 
 
     .attr('x', function() { 
 
      return x(d.date); 
 
     }) 
 
     .attr('y', function() { 
 
      return y(d.count) - 15; 
 
     }) 
 
     .text(function() { 
 
      return [ +d.date, +d.count]; // Value of the text 
 
     }); 
 
    } 
 

 
    //mouseout event handler function 
 
    function onMouseOut(d, i) { 
 
     // use the text label class to remove label on mouseout 
 
     d3.select(this).attr('class', 'bar'); 
 
     d3.select(this) 
 
      .transition()  // adds animation 
 
      .duration(400) 
 
      .attr('width', x.bandwidth()) 
 
      .attr("y", function(d) { return y(d.count); }) 
 
      .attr("height", function(d) { return height - y(d.count); }); 
 

 
     d3.selectAll('.val') 
 
      .remove() 
 
    } 
 

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

답변

0

나는 d3.nest()를 사용하고 (이 경우 d.date) 당신이 계산 싶어 키 값에서 롤업을하고 width 변수에이 카운트 값을 사용합니다.

여기이 방법을 사용하여 만든 plunker입니다.

+0

d3.v4.min.js 오류가 발생하여 동일한 코드를 실행하려고하면 : 2 Uncaught TypeError : 정의되지 않은 'length'속성을 읽을 수 없습니다. at t (d3.v4.min.js : 2) 어디서 동일한 파일을 data.json과 index.html로 사용했는지 –

+0

같은 폴더에 있습니까? 로컬 서버를 사용하고 있습니까? json 파일을로드하기 위해 로컬 서버를 통해로드하지 않는 경우에만 오류가 발생하므로 –

+0

예 둘 모두 같은 폴더에 있고 로컬 서버를 사용하여 실행합니다. –

관련 문제