Question

我一直在努力解决这个问题。我没有错误，但由于某种原因，图表没有正确绘制。有人能指出我犯的错误吗？

我想将字符串用作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>

Answer 1

您尚未为自己的尺度设置domain。这些用户值映射到相应的像素值range。

通过查看您的代码，合适的域名将是：

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

完整代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" 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>

＆＃13;

d3.js字符串值为x轴域

1 个答案: