Question

我是D3的新手。我有一个大的JSON数组，我通过AJAX拉入D3来制作条形图。该数组用于在Bootstrap轮播中生成多个幻灯片，其中每个幻灯片是具有相应子元素的数组（下面的i）的元素。我已经遇到了通过直接从这个大数组中提取来设置x和y比例的问题，因此我将必要的值放在单独的数组中（尽管这显然还没有解决问题）。

这些数组与幻灯片数量的长度相同，是maxDefectCounts（）和numberOfBars（）。注意，它们不是关联数组/ JSON，它们是我从JSON中提取的数据。

我希望每张幻灯片中最大条的高度等于maxDefectCounts [i]，其中i是当前幻灯片。我希望条形图的宽度为数字条形图[i] /条形图绑定的SVG宽度。

对于y-scale，我尝试了以下但没有运气。我不确定你是否可以将一个单独的数据元素绑定到一个缩放函数（注意我在下面的函数中使用j而不是I，以免与i混淆，这是幻灯片编号）

     var y = d3.scale.linear()
       .range([height,0])
       .data(maxDefectCounts)
       .enter()
       .domain([0,function(d,j){return d[j];}]);

对于宽度我目前正在做的是迭代d.binSummary中的不同条并使用固定值barWidth（这是用于测试）。由于每个幻灯片都有不同数量的条形，我希望这与numberOfBars [i]成比例而不是这个固定值

var bar = paretoBox.selectAll("g")
    .data(function(d) {return d.binSummary;})
    .enter()
    .append("g")
    .attr("transform",function(d,j) {
        return "translate(" + j * barWidth + ",0)";
    });

非常感谢任何建议，谢谢你。

Answer 1

我确定了一种解决方法。由于每个幻灯片都需要独立的值，因此我构建了一个循环，将原始JSON作为输入并为每个元素构建幻灯片。这允许提取所需信息。关于使用单个输入数组构建多个图表，使用了类似的方法here。

在一个页面中为多个条形图设置“缩放域”和“条形宽度”

1 个答案: