Question

我正在使用d3 js在同一个svg元素上显示两个条形图。两个图都有不同的json数据源。单独测试时，两个图表都会完美显示。当整个源代码合并时，它不会

要将矩形附加到页面，我使用以下代码两次（在.attr的'x'和'y'中更改了值）

svgd.selectAll("rect")                                  
              .data(dataset_dept_errors)                                        
              .enter()
              .append("rect")
              .attr("x", function (d, i) {
                    return i * 100 + padding_dept;                              // x position of rect as per i->0,1,2,3,...
               })
               .attr("y", function (d) {
                     return (h_dept + yshift_for_dept - yScale(d.NumRuleFailed));                           //y position of rect as per (h-value) to prevent inverted range
               })
               .attr("width", "50")             //depending upon domain->no of inputs - with of band is decided acc. to fit in svg
               .attr("height", function (d) {
                   return yScale(d.NumRuleFailed);                          //depending upon domain->value of inputs - with of band is decided acc. to fit in svg
              })
              .attr("fill", function (d) {                      //colour based on values -> more errors - dark coloured bars
                  return "rgb(" + 100 + "," + 0 + "," + 200 + ")";

              })
                .attr("stroke", "black");

我已经读过selectAll（'rect'）将被忽略，或者第二次遇到它时可能无法正常工作，因此它应该只在一个svg上使用一次。那么我应该如何将下一组矩形附加到我的页面？

EDIT1：我对selectAll（'text'）在同一页面上放置多个文本元素有同样的问题

Answer 1

您可以先向g元素添加两个svg元素，对其进行适当放置，然后在g元素内创建图形。

Answer 2

问题出在根节点 - svgd。只需使用两个单独的根SVG节点（svgd，svgd2）：

var svgd  = d3.select("#svg1"),
    svgd2 = d3.select("#svg2");

然后：

svgd.selectAll("rect")                                  
    .data(dataset_dept_errors)                                        
    .enter()
    ...

svgd2.selectAll("rect")                                  
     .data(dataset_dept_errors)                                        
     .enter()
     ...

你会没事的，

在单个页面上组合两个条形图

2 个答案: