Svg 将轴附加到D3图表上_Svg_D3.js

Svg 将轴附加到D3图表上

svg d3.js

Svg 将轴附加到D3图表上,svg,d3.js,Svg,D3.js,我正在读一本关于D3数据可视化的书。我对这个有点陌生，我正在尝试将轴添加到我的图表中。示例代码可以工作，但由于某种原因，当我尝试将axis类附加到SVG元素时，它无法工作我的代码如下： function draw(data) { //code "use strict"; var margin = 50, width = 700, height = 300; var x_extent = d3.extent(data, function(d){r

我正在读一本关于D3数据可视化的书。我对这个有点陌生，我正在尝试将轴添加到我的图表中。示例代码可以工作，但由于某种原因，当我尝试将axis类附加到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) 
}

类名不能包含空格。运行代码

.attr（“class”，“x轴”）

时，实际上是将两个类

和

axis

分配给元素。这本身不是问题，但是选择器

.y轴

由于同样的原因无法正常工作。它尝试查找具有类

和

axis

标记的元素（因为您没有在其前面放置点）。这是失败的，因为没有这样的元素

解决此问题的最简单方法可能是简单地分配一个单词类，例如

xAxis

。或者，您可以将选择器更改为

.y.axis

，以匹配具有这两个类的元素。