d3.js строковые значения как домен оси x

Я боролся с этим. Я не получаю ошибки, но по какой-то причине диаграмма не рисует правильно. Может кто-то указать мне на ошибку, которую я делаю?d3.js строковые значения как домен оси x

Я хочу использовать строки как домен x оси и удваивает, чтобы нарисовать путь. Пытались это до сих пор:

<div class="row"> 
<div class="col-md-12"> 
<svg id="visualisation" width="1355" height="333"></svg> 
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 
      function InitChart() { 
       var data = [{"name":"A","value":134},{"name":"B","value":138.26315789473685},{"name":"C","value":142.52631578947367},{"name":"D","value":146.78947368421052},{"name":"E","value":151.05263157894737},{"name":"F","value":155.31578947368419},{"name":"G","value":159.57894736842104},{"name":"H","value":163.84210526315789},{"name":"I","value":168.10526315789474},{"name":"J","value":172.36842105263156},{"name":"K","value":176.63157894736841},{"name":"L","value":180.89473684210526},{"name":"M","value":185.15789473684208},{"name":"N","value":189.42105263157893},{"name":"O","value":193.68421052631578},{"name":"P","value":197.94736842105263},{"name":"Q","value":202.21052631578945},{"name":"R","value":206.4736842105263},{"name":"S","value":210.73684210526318},{"name":"T","value":215}]; 

       var vis = d3.select("#visualisation"); 

       var MARGINS = { 
        top: 20, 
        right: 20, 
        bottom: 20, 
        left: 50 
       }, 

       WIDTH = 1355 - MARGINS.left - MARGINS.right, 
       HEIGHT = 333 - MARGINS.top - MARGINS.bottom; 

       var x = d3.scale.ordinal().rangeRoundBands([0, WIDTH], .1); 

       var y = d3.scale.linear().rangeRound([HEIGHT, 0]); 

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

       var yAxis = d3.svg.axis() 
        .scale(y) 
        .orient("left"); 

       var lineGen = d3.svg.line() 
        .interpolate("basis") 
        .x(function(d) { 
         return x(d.name); 
        }) 
        .y(function(d) { 
         return y(d.value); 
        }); 

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

       vis.append("svg:g") 
        .attr("class", "y axis") 
        .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
        .call(yAxis) 
        .append("text") 
        .attr("transform", "rotate(-90)") 
        .attr("y", 6) 
        .attr("dy", ".71em") 
        .style("text-anchor", "end") 
        .text("ETFE"); 


       vis.append('svg:path') 
        .attr('d', lineGen(data)) 
        .attr('stroke', 'green') 
        .attr('stroke-width', 2) 
        .attr('fill', 'none'); 

      } 
      InitChart(); 
</script> 
</div> 
</div>

источник

2016-03-09 konrad

Вы не установили domain для ваших весов. Это значения , которые соответствуют соответствующим пикселам значения range.

Глядя на ваш код подходящие домены будут:

x.domain(data.map(function(d){ return d.name; })); 
    y.domain(d3.extent(data, function(d){ return d.value; }))

Полный код:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <svg id="visualisation" width="1355" height="333"></svg> 
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
    <script> 
 
    function InitChart() { 
 
     var data = [{ 
 
     "name": "A", 
 
     "value": 134 
 
     }, { 
 
     "name": "B", 
 
     "value": 138.26315789473685 
 
     }, { 
 
     "name": "C", 
 
     "value": 142.52631578947367 
 
     }, { 
 
     "name": "D", 
 
     "value": 146.78947368421052 
 
     }, { 
 
     "name": "E", 
 
     "value": 151.05263157894737 
 
     }, { 
 
     "name": "F", 
 
     "value": 155.31578947368419 
 
     }, { 
 
     "name": "G", 
 
     "value": 159.57894736842104 
 
     }, { 
 
     "name": "H", 
 
     "value": 163.84210526315789 
 
     }, { 
 
     "name": "I", 
 
     "value": 168.10526315789474 
 
     }, { 
 
     "name": "J", 
 
     "value": 172.36842105263156 
 
     }, { 
 
     "name": "K", 
 
     "value": 176.63157894736841 
 
     }, { 
 
     "name": "L", 
 
     "value": 180.89473684210526 
 
     }, { 
 
     "name": "M", 
 
     "value": 185.15789473684208 
 
     }, { 
 
     "name": "N", 
 
     "value": 189.42105263157893 
 
     }, { 
 
     "name": "O", 
 
     "value": 193.68421052631578 
 
     }, { 
 
     "name": "P", 
 
     "value": 197.94736842105263 
 
     }, { 
 
     "name": "Q", 
 
     "value": 202.21052631578945 
 
     }, { 
 
     "name": "R", 
 
     "value": 206.4736842105263 
 
     }, { 
 
     "name": "S", 
 
     "value": 210.73684210526318 
 
     }, { 
 
     "name": "T", 
 
     "value": 215 
 
     }]; 
 

 
     var vis = d3.select("#visualisation"); 
 

 
     var MARGINS = { 
 
      top: 20, 
 
      right: 20, 
 
      bottom: 20, 
 
      left: 50 
 
     }, 
 

 
     WIDTH = 1355 - MARGINS.left - MARGINS.right, 
 
     HEIGHT = 333 - MARGINS.top - MARGINS.bottom; 
 

 
     var x = d3.scale.ordinal().rangeRoundBands([0, WIDTH], .1); 
 

 
     var y = d3.scale.linear().rangeRound([HEIGHT, 0]); 
 
     
 
     x.domain(data.map(function(d){ return d.name; })); 
 
     y.domain(d3.extent(data, function(d){ return d.value; })) 
 

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

 
     var yAxis = d3.svg.axis() 
 
     .scale(y) 
 
     .orient("left"); 
 

 
     var lineGen = d3.svg.line() 
 
     .interpolate("basis") 
 
     .x(function(d) { 
 
      return x(d.name); 
 
     }) 
 
     .y(function(d) { 
 
      return y(d.value); 
 
     }); 
 

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

 
     vis.append("svg:g") 
 
     .attr("class", "y axis") 
 
     .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
 
     .call(yAxis) 
 
     .append("text") 
 
     .attr("transform", "rotate(-90)") 
 
     .attr("y", 6) 
 
     .attr("dy", ".71em") 
 
     .style("text-anchor", "end") 
 
     .text("ETFE"); 
 

 

 
     vis.append('svg:path') 
 
     .attr('d', lineGen(data)) 
 
     .attr('stroke', 'green') 
 
     .attr('stroke-width', 2) 
 
     .attr('fill', 'none'); 
 

 
    } 
 
    InitChart(); 
 
    </script> 
 
</body> 
 

 
</html>

источник

2016-03-09 01:02:46 Mark

я вижу. Это было полезно. спасибо – konrad

d3.js строковые значения как домен оси x

ответ

Смежные вопросы