1

我正在阅读一本关于使用 D3 进行数据可视化的书。我对此很陌生，我正在尝试将轴添加到我的图表中。示例代码有效，但由于某种原因，当我尝试将轴类附加到我的 SVG 元素时，它不起作用。

我的代码如下：

    function draw(data) {
    //code
    "use strict";

var margin = 50,
    width = 700,
    height = 300;
    var x_extent = d3.extent(data, function(d){return d.collision_with_injury});
    var y_extent = d3.extent(data, function(d){return d.dist_between_fail});

var x_scale = d3.scale.linear()
    .range([margin, width-margin])
    .domain(x_extent);

var y_scale = d3.scale.linear()
    .range([height-margin, margin])
    .domain(y_extent);

var x_axis = d3.svg.axis().scale("x_scale");
var y_axis = d3.svg.axis().scale("y_scale").orient("left");

    d3.select("body")
    .append("svg")
        .attr("width", width)
        .attr("height", height)
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d){return x_scale(d.collision_with_injury)})
    .attr("cy", function(d){return y_scale(d.dist_between_fail)})
    .attr("r", 5)

    d3.select("svg") 
          .append("g") 
            .attr("class", "x axis") 
            .attr("transform", "translate(0," + (height-margin) + ")") 
          .call(x_axis);

    d3.select("svg")
        .append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + margin +", 0)")
        .call(y_axis)

     d3.select('.y axis')
     .append('text')
     .text('mean distance between failure (miles)')
     .attr('transform', "rotate (-90, -43, 0) translate(-280)")

    d3.select('.x axis')
    .append('text')
    .text('collisions with injury (per million miles)')
    .attr('x', function(){return (width / 2) - margin})
    .attr('y', margin/1.5) 
}
4

1 回答 1

1

类名不能包含空格。当您运行代码时，.attr("class", "x axis")您实际上是在分配两个类x和axis元素。这本身不是问题，但.y axis出于同样的原因，选择器无法正常工作。它试图找到一个带有类y和axis标签的元素（因为你没有在它前面放一个点）。这失败了，因为没有这样的元素。

解决此问题的最简单方法可能是简单地分配一个单词类，例如xAxis. 或者，您可以将选择器更改.y .axis为匹配具有这两个类的元素。

于 2013-07-16T20:40:51.003 回答