javascript - d3.js box.js的箱形图定位问题

我正在尝试将箱形图实现为使用d3和AngularJS的数据可视化界面的一部分。我正在使用此箱形图软件包：https://bl.ocks.org/mbostock/4061502。

但是，我无法弄清楚示例代码的哪一部分控制箱形图的位置。在该示例中，五个箱形图按顺序排列。当我尝试生成图时，它们全部出现在彼此的顶部。



这是我用来生成箱形图的代码：

            boxplots = svg.selectAll("svg")
                .data(boxPlotData)
                .enter().append("svg")
                .attr("class", "box")
                .attr("width", boxWidth + margin.left + margin.right)
                .attr("height", boxHeight + margin.bottom + margin.top)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                .call(chart);

这是有关如何创建svg画布的代码。这是在角度指令中完成的：

template:"<svg width='825' height='600'></svg>",
    link: function($scope, elem){

        var d3 = $window.d3;
        var rawSvg=elem.find('svg'); // this is the svg created in the template

        var width = rawSvg[0].attributes[0].value;
        var height = rawSvg[0].attributes[1].value;

        var svg = d3.select(rawSvg[0]);

编辑：尚不完善，但到达那里：

最佳答案

您需要一个序数刻度来将父级svg中的框的svg元素定位。假设width代表父级svg元素的宽度，并且data是数据元素的数组，则可以使用它创建刻度：

const x = d3.scaleBand()
              .range( [0, width] )
              .domain( data.map( (el,i) => i ) );

现在，您可以在svg创建中使用

boxplots = svg.selectAll("svg")
                .data(boxPlotData)
                .enter().append("svg")
                .attr( "x", (d,i) => x(i) ) // this is added
                .attr("class", "box")
                .attr("width", boxWidth + margin.left + margin.right)
                .attr("height", boxHeight + margin.bottom + margin.top)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
               .call(chart);

PS：假设您使用的是d3js v4。 v3中的比例语法不同。

PPS：我目前无法测试代码，但是它应该像描述的那样工作。