D3圖形有關縮放的問題

Question

我正在舊的angularjs應用程序上設置冰柱圖。 我決定嘗試d3圖並進行一些測試...所以基本上是兩個問題，兩個不同的代碼：

問題1：最初我使用以下示例： https : //bl.ocks.org/lorenzopub/c4a226f9c29a20dd0cc152e212a70c9a

我意識到，當您放大圖形的某些區域時，它將返回“屬性寬度：負值無效。（“-2428.9156626506024”）”，即使進行縮放也不會顯示文本。 知道為什么會這樣嗎？

問題2：后來我嘗試使用與前面的示例相同的json來構建自己的結構。 主要區別在於，我創建了一個“ g”，並在其中放置了“ rec”和“ foreignObject”，以使其在結構方面更具組織性。 下面的代碼

我將以下代碼放在angularjs指令中。

我正在使用d3的V4“ // d3js.org/d3.v4.min.js”

      var totalSize = 0;
      var width = 960, height = 500;
      var x = d3.scaleLinear().range([0, width]);
      var y = d3.scaleLinear().range([0, height]);
      var color = d3.scaleOrdinal(d3.schemeCategory20c);
      var partition = d3.partition()
        .size([width, height])
        .padding(0)
        .round(true);
      var svg = d3.select("#pleaseWork") //.append("svg")
        .attr("width", width)
        .attr("height", height);
      var groups = svg.selectAll("g");

      d3.json("graphs/dataD3.json", function (error, root) {
        //d3.json("graphs/newData.json", function (error, root) {
        if (error) throw error;
        root = d3.hierarchy(d3.entries(root)[0], function (d) {
            return d3.entries(d.value)
          })
          .sum(function (d) {
            return d.value
          })
          .sort(function (a, b) {
            return b.value - a.value;
          });

        partition(root);
        groups = groups
          .data(root.descendants())
          .enter().append("g")
          .attr("fill", function (d) {
            return color((d.children ? d : d.parent).data.key);
          })
          .on("click", clicked);
        //get total size from rect
        totalSize = groups.node().__data__.value;
        console.log(groups.node().__data__.value);
        groups.append('rect')
          .attr("x", function (d) {
            return d.x0;
          })
          .attr("y", function (d) {
            return d.y0;
          })
          .attr("width", function (d) {
            return d.x1 - d.x0;
          })
          .attr("height", function (d) {
            return d.y1 - d.y0;
          });

        groups.append('foreignObject')
          .text(function (d) {
            //return d.data.key + '-' + d.value;
            return d.data.key + ' - ' + (100 * d.value / totalSize).toPrecision(3) + '%';
          })
          .attr("x", function (d) {
            return d.x0;
          })
          .attr("y", function (d) {
            return d.y0;
          })
          .attr("width", function (d) {
            return d.x1 - d.x0;
          })
          .attr("height", function (d) {
            return d.y1 - d.y0;
          });

      });

      function clicked(d) {
        console.log(d);
        x.domain([d.x0, d.x1]);
        y.domain([d.y0, height]).range([d.depth ? 20 : 0, height]);
        groups.transition()
          .duration(750)
          .attr("x", function (d) {
            return x(d.x0);
          })
          .attr("y", function (d) {
            return y(d.y0);
          })
          .attr("width", function (d) {
            return x(d.x1) - x(d.x0);
          })
          .attr("height", function (d) {
            return y(d.y1) - y(d.y0);
          });
      }
    }

當我單擊一個要縮放的項目時，它輸入了“已單擊”功能，但是什么也沒有發生，我希望實現與第一個示例類似的功能，在該示例中，它會縮放到該元素級別。 預先感謝您的支持

Answer 1

通過將代碼從fo.transition（）替換為來解決了第一個問題：

.attr("x", function (d) {
        return d.x0;
      })
      .attr("y", function (d) {
        return d.y0;
      })
      .attr("width", function (d) {
        return d.x1 - d.x0;
      })
      .attr("height", function (d) {
        return d.y1 - d.y0;
      })

第二個問題，我這樣解決：

      var width = 500,
        height = 300;
      var partitionLayout = d3.partition().size([width, height]);

      //needed for zoom ? 
      var x = d3.scaleLinear().range([0, width]);
      var y = d3.scaleLinear().range([0, height]);

      //needed to fill the colour
      var colour = d3.scaleOrdinal(d3.schemeCategory20c);

      d3.json("graphs/newstructure.json", function (data) {
        var rootNode = d3.hierarchy(data);
        rootNode.sum(function (d) {
          return d.value;
        });

        // structure the data for the graph
        partitionLayout(rootNode);

        var group = d3.select('#new')
          .selectAll('g')
          .data(rootNode.descendants())
          .enter()
          .append('g')
          .attr("fill", function (d) {
            return colour(d.data.colour);
          })
          .on("click", clicked);

        group.append('rect')
          .attr('x', function (d) {
            console.log(d);
            return d.x0;
          })
          .attr('y', function (d) {
            return d.y0;
          })
          .attr('width', function (d) {
            return d.x1 - d.x0;
          })
          .attr('height', function (d) {
            return d.y1 - d.y0;
          })
          .attr('fill', function (d) {
            return d.data.colour;
          });

        group
          .append('foreignObject')
          .text(function (d) {
            console.log(d);
            return d.data.name + ' - ' + d.value;
          })
          .attr("x", function (d) {
            return d.x0;
          })
          .attr("y", function (d) {
            return d.y0;
          })
          .attr("width", function (d) {
            return d.x1 - d.x0;
          })
          .attr("height", function (d) {
            return d.y1 - d.y0;
          });

        function clicked(d) {
          x.domain([d.x0, d.x1]);
          y.domain([d.y0, height]).range([d.depth ? 20 : 0, height]);

          group.transition()
            .duration(750)
            .attr("x", function (d) {
              return x(d.x0);
            })
            .attr("y", function (d) {
              return y(d.y0);
            })
            .attr("width", function (d) {
              return x(d.x1) - x(d.x0);
            })
            .attr("height", function (d) {
              return y(d.y1) - y(d.y0);
            });

          var rects = d3.select('#new')
            .selectAll('g rect');

          rects.transition()
            .duration(750)
            .attr("x", function (d) {
              return x(d.x0);
            })
            .attr("y", function (d) {
              return y(d.y0);
            })
            .attr("width", function (d) {
              return x(d.x1) - x(d.x0);
            })
            .attr("height", function (d) {
              return y(d.y1) - y(d.y0);
            });

          var rects = d3.select('#new')
            .selectAll('g foreignObject');

          rects.transition()
            .duration(750)
            .attr("x", function (d) {
              return x(d.x0);
            })
            .attr("y", function (d) {
              return y(d.y0);
            })
            .attr("width", function (d) {
              return x(d.x1) - x(d.x0);
            })
            .attr("height", function (d) {
              return y(d.y1) - y(d.y0);
            });
        }
    });