D3点图表

Question

我正在尝试使用D3创建一个点图表，但有一些我缺少的东西。它只是不工作。每个月都没有显示点。仅显示两个月，沿x轴出现多个点。

我试图改变音阶，域名，我只是不能指责它。

注意：点击多边形要素时会显示图表。

这是一个jsfiddle：https://jsfiddle.net/Monduiz/6jv1w8nd/

代码：

var yScale = d3.scale.ordinal()
    .domain(data.map(function(d) { return d.name; }))
    .range([0, height]);

var xScale = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.value; })])
    .range([0, width]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")       

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

svg.selectAll(".circle")
    .data(data)
    .enter()
     .append("circle")
     .attr("class","circle")
     .attr("r",3)
     .attr("fill", "steelBlue")
     .attr("cx", function(d){ return xScale(d.value); })
     .attr("cy", function(d){ return yScale(d.name); });

Answer 1

对于d3.scale.ordinal()，range会将数组的位置映射到您的域。你想使用rangeRoundPoints，它将采取开始/停止位置并将其映射到均匀间隔的点。

更新了小提琴here。