Question

我想创建一个d3条形图。我从谷歌获得了以下代码。在运行此代码时，页面为空。在eclipse控制台中，也没有显示错误/异常。在浏览器的控制台中也没有显示错误。

以下是代码：

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function(){

    var barData = [{
      'x': 1,
      'y': 5
    }, {
      'x': 20,
      'y': 20
    }, {
      'x': 40,
      'y': 10
    }, {
      'x': 60,
      'y': 40
    }];

    var vis = d3.select('#chart'),
      WIDTH = 1000,
      HEIGHT = 500,
      MARGINS = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
      },
      xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function (d) {
        return d.x;
      })),


      yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,
        d3.max(barData, function (d) {
          return d.y;
        })
      ]),

      xAxis = d3.svg.axis()
        .scale(xRange)
        .tickSize(5)
        .tickSubdivide(true),

      yAxis = d3.svg.axis()
        .scale(yRange)
        .tickSize(5)
        .orient("left")
        .tickSubdivide(true);


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

    vis.append('svg:g')
      .attr('class', 'y axis')
      .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
      .call(yAxis);

    vis.selectAll('rect')
      .data(barData)
      .enter()
      .append('rect')
      .attr('x', function (d) {
        return xRange(d.x);
      })
      .attr('y', function (d) {
        return yRange(d.y);
      })
      .attr('width', xRange.rangeBand())
      .attr('height', function (d) {
        return ((HEIGHT - MARGINS.bottom) - yRange(d.y));
      })
      .attr('fill', 'grey');


  });

</script>

<div id="chart"/>

请给我任何解决此问题的建议。

Answer 1

您没有绘制SVG对象，因此形状遍布整个地方：

http://jsfiddle.net/5hh3s1rj/

我改变的主要部分是这一行。之后，所有形状都在'画布'中正确绘制：

var vis = d3.select('#chart').append("svg")

d3条形图不起作用

1 个答案: