javascript - 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它将获取开始/停止位置并将其映射到均匀间隔的点。

更新了 fiddle here .