d3.js box.js 的箱线图定位问题

Question

我正在尝试将箱线图作为使用 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]);

编辑：还不完美，但已经到了：

Answer 1

您需要一个序数比例来定位父 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：我目前无法测试代码，但它应该像描述的那样工作。