Question

我正在编写一本关于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) 
}

Answer 1

类名不能包含空格。当您运行代码.attr("class", "x axis")时，您实际上正在为元素分配两个类x和axis。这不是问题，但选择器.y axis不能像您期望的那样工作。它尝试查找具有类y和axis标记的元素（因为您没有在其前面放置一个点）。这失败了，因为没有这样的元素。

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

将轴附加到D3图表

1 个答案: