D3.js缩放只工作时，光标在像素的图形

d3.js zooming only works when cursor over pixels of graph

本文关键字：光标 像素 图形 js 缩放 工作 D3      更新时间：2023-09-26

我正试图以最简单，最基本的方式在树形图上实现缩放功能，并使其工作。唯一的问题是，缩放事件仅在光标位于边缘、节点或文本上方时起作用。当光标在svg的任何部分上时，我如何允许缩放?

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 2000 - margin.right - margin.left,
    height = 2000 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);
var y = d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);
var tree = d3.layout.tree()
    .size([height, width])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("pointer-events", "all")
    .append('svg:g')
    .call(d3.behavior.zoom()
        .x(x)
        .y(y)
        .scaleExtent([1,8])
        .on("zoom", zoom))
    .append('svg:g');
function zoom(d) {        
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

d3.json("flare.json", function(error, root) {
  var nodes = tree.nodes(root),
      links = tree.links(nodes);
  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);
  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
 //     .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
  node.append("circle")
      .attr("r", 4.5);
  node.append("text")
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
//      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
      .text(function(d) { return d.name; });
    });
d3.select(self.frameElement).style("height", "800px");

我一直在使用以下jsfiddle作为指南，无法看到差异在哪里:http://jsfiddle.net/nrabinowitz/QMKm3/

你在问题中所指的jsfiddle有这个…

vis.append('svg:rect')
    .attr('width', w)
    .attr('height', h)
    .attr('fill', 'white');

这确保了无论你在哪里，总是有一些东西被画出来。您需要相应地调整代码。如果你不喜欢白色，可以设置不透明度为0，这样就看不到了，但它必须在那里

相关文章：