Question

我现在正在制作一个条形图，它与格式为http://bl.ocks.org/kiranml1/6872226的格式相似，其中＆＃34; x轴＆＃34;在左边和＆＃34; y轴＆＃34;在底部。我左边有一些数字作为我的＆＃34;类别＆＃34;像3048,3060,3096 ......等。这些类别中的每一个都是一个数字，每个类别都有某种差异。

我想知道，我如何制作条形图以使每个类别均匀分布？现在，我有rangeroundbands使它们均匀分布，但是我试图使它们之间的距离与类别之间的数字差异相关。例如，假设3048,3096,4050，3048和3096之间的距离将小于3096和4050之间的距离，视觉足以告诉但也不会使条形图不可能大。

var yScale = d3.scale.ordinal()
    .domain(d3.extent(molecules_0, function(d) {
        return parseInt(d.molweight);
    }))
    .rangeRoundBands([padding, height - padding]);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .tickSize(2)
    .tickFormat(function(d, i) {
        return molecules_0[i].molweight;
    })
    .tickValues(d3.range(20));

Answer 1

您必须修改Y轴。目前它只使用categories数组的长度：

var yscale = d3.scale.linear()
    .domain([0,categories.length])
    .range([0,480]);

您真正需要做的就是更改域的输入：

    .domain(d3.extent(categories))

这样你的Y位置也将基于类别值。

Answer 2

您希望定位SVG rect元素的y属性。假设您的类别是[3048,3060,3096]之类的数组，您可以将y属性设置为类别[i + 1] - 类别[i]。

以上不适用于数组的最后一个元素，因为[i + 1]将是未定义的。您可以将语句包装在三元组中，这样如果i === 0，它只返回零（因为0是假的）。这看起来像这样：

i ? categories[i+1] - categories[i] : 0

如果更容易，你可以像这样创建一个“差异”数组：[0,12,36]。这可能更容易处理，您可以在计算刻度线的位置时重复使用它。（请参阅 axis.tickValues([values]) 上的D3文档。您可以提供一个数组来控制轴刻度位置。

您可能还需要添加一些填充（somePadding）。默认填充为19。

请参阅以下建议修订：

var chart = canvas.append('g')
    .attr("transform", "translate(150,0)")
    .attr('id','bars')
    .selectAll('rect')
    .data(dollars)
    .enter()
    .append('rect')
    .attr('height',19)
    //.attr({'x':0,'y':function(d,i){ return yscale(i)+19; }})
    // modify the y attribute of each SVG rect element
    .attr({'x':0,'y':function(d,i){ return yscale(i) + (i ? categories[i+1] - categories[i] : 0) + somePadding; }})
        .style('fill',function(d,i){ return colorScale(i); })
        .attr('width',function(d){ return 0; });

关联d3.js中条之间的距离

2 个答案: