0

这是一个 d3 js 图的链接。

http://enjalot.com/inlet/4131006/

这是代码

    var w = 300,
    h = 300,
    padding = 31,
    p = 10;

var data = [{count:200,year:2008},
    {count:240,year:2010},
    {count:290,year:2009}];

var bar_height = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.count; }) )  // min max of count
    .range([p,h-p]);  // min max of area to plot in


var bar_xpos = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.year; }) )  // min max of year
    .range([p,w-p]);  // min max of area to plot in


var xAxis = d3.svg.axis()
            .scale(bar_xpos)
            .orient("bottom")
            .ticks(5);  //Set rough # of ticks

var yAxis = d3.svg.axis()
            .scale(bar_height)
            .orient("left")
            .ticks(5);

var svg = d3.select("svg")
    .attr("width", w)
    .attr("height", h);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", function(d) {
        return bar_xpos(d.year); })
    .attr("y", function(d) { 
        return h - bar_height(d.count); })
    .attr("width", 10)
    .attr("height", function(d) {return bar_height(d.count); })
    .attr("fill", "steelblue")

我已经能够在该图中绘制 y 轴和 x 轴，但它们看起来不正确。有一些问题 矩形线不在 X 轴上。图表上的x轴和y轴上没有0。它以json数据中的最小值开始。并且可以通过任何方式配置轴上两个标记之间的距离。

4

1 回答 1

3

要配置轴，您必须修改比例。

var bar_height = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.count; }) )  // min max of count
    .range([p,h-p]);  // min max of area to plot in


var bar_xpos = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.year; }) )  // min max of year
    .range([p,w-p]);  // min max of area to plot in

d3.extent() 同时返回数据的最小值和最大值，并将其用作图形的域。因为您使用bar_heightandbar_xpos来格式化您scale的 s，所以刻度的最小值也将是数据中的最小值。要解决此问题，请d3.max()改用，如下所示：

var bar_height = d3.scale.linear()
    .domain([d3.max(data, function(d) { return d.count; }), 0] )  // min max of count
    .range([p,h-p]);  // min max of area to plot in


var bar_xpos = d3.scale.linear()
    .domain([2000, d3.max(data, function(d) { return d.year; })] )  // min max of year
    .range([p,w-p]);  // min max of area to plot in

您可以为 bar_xpos min 使用 0，但如果您按年进行，则没有意义，因为您的数据将无法实际读取。我在这里使用了 2000 分钟。

这里的工作示例。

此外，在此示例中，我将您的条形位置格式化为与轴更好地对齐。我替换.attr('width', 10)为, 并从attr 中.attr('width', barwidth)减去。这将使你的酒吧的右边缘与轴的右边缘对齐，而不是溢出边缘。barwidthx

编辑： 修改y和height属性。高度则相反，否则在图表下方。链接已更新。

.attr("y", function(d) { 
    return bar_height(d.count); })
.attr("width", barwidth)
.attr("height", function(d) {return h - bar_height(d.count) - padding; })
于 2012-11-22T15:02:43.190 回答