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。