Question

我的数据如下所示：

var sampleData = [{ “x”：'GOOG'， “y”：5 }，{ “x”：'FB'， “y”：20 }，{ “x”：'MSFT'， “y”：10 }，{ “x”：'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

我在这个更新的Plunk中进行了一些更改：http://plnkr.co/edit/YDUxLQWg5tiIBN5eBHkf（尽管还有一些轴定位可以解决）。

首先，控制台显示错误：＆＃34;未捕获的ReferenceError：xRange未定义＆＃34;。这只是一个错字，改变：

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

沿400px轴均匀分布

最后我改变了你的圈子＆＃39;正在计算dy属性（使用x值，假定复制粘贴错误）：

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

到

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

使用Ordinal轴在D3中渲染散点图

1 个答案: