使用序轴呈现在D3

Question

散点图

我的数据看起来如下：

变种的sampleData = [{ “×”： 'GOOG'， “Y”：5 }，{ “×” ： 'FB'， “Y”：20 }，{ “×”： 'MSFT'， “Y”：10 }，{ “×”： 'EBAY'， “Y”：40 }，{ “x”：'AMZN'， “y”：5 }，{ “x”：'AAPL'， “y”：60 }];

x轴代表股票名称，y轴代表股票数量。

我试图用散点图表示相同的情况，其中x轴将是序数（代表股票名称），而y轴将是股票数量。

我的代码如下。没有任何东西会被渲染。

var vis = d3.select("#svgVisualize"); 

    var yMax = d3.max(sampleData, function(point) {return point.y;}); 

    //step 1 : scale the data 

    var xange = d3.scale.ordinal(); 
    var yRange = d3.scale.linear().range([400, 40]).domain([0,yMax]); 


    //step 2: scale the axis 
    var xAxis = d3.svg.axis().scale(xRange); 
    var yAxis = d3.svg.axis().scale(yRange).orient("left"); 

    //Step3: append the x and y axis 
    vis.append('svg:g').call(xAxis).attr("transform", "translate(0,400)"); 
    vis.append('svg:g').call(yAxis).attr("transform", "translate(40,0)"); 

    var circles = vis.selectAll("circle").data(sampleData); 

    circles 
    .enter() 
    .insert("circle") 
    .attr("cx", function(d) { return xRange (d.x); }) 
    .attr("cy", function(d) { return xRange (d.x); }) 
    .attr("r", 10) 
    .style("fill", "red"); 

Plnkr可在这里：

http://plnkr.co/edit/5v76uKi5wDK65H2GGqVn

Answer 1

我做了几个变化，这个更新的普拉克的：http://plnkr.co/edit/YDUxLQWg5tiIBN5eBHkf（虽然还是有一些轴定位理清）。

首先，控制台显示错误：“Uncaught ReferenceError：xRange is not defined”。这只是一个错字，变化：

var xange = d3.scale.ordinal(); 

到

var xRange = d3.scale.ordinal(); 

其次，即使序尺度您需要定义range和domain。我添加：

var xRange = d3.scale.ordinal() 
    .domain(sampleData.map(function(d) { return d.x; })) 
    .rangePoints([0, 400]); 

的domain是从数据中的所有x值，这些均匀地沿着使用rangePoints

最后我改变是如何被计算的圈子dy属性的400个像素轴线间隔开（用x值，设定一个复制粘贴错误）：

.attr("cy", function(d) { return xRange(d.x); }) 

到

.attr("cy", function(d) { return yRange(d.y); })