D3 dot plot chart

D3 dot plot chart

本文关键字:chart plot dot D3      更新时间:2023-09-26

我正试图用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); });

对于d3.scale.ordinal(),range采用位置数组来映射到您的域。您希望使用rangeRoundPoints,它将采用开始/停止位置,并将其映射到等距点。

此处更新了fiddle。