CSS变换比例下的D3笔刷坐标

D3笔刷在css变换比例下无法正常工作。当svg位于div元素下，并且使用CSS scale转换div元素时，笔刷操作显示错误的坐标

为了演示这个案例，下面是示例

这是一个简单的修改

我所做的只是将SVG放在div元素中，并使用CSS transform scale0.5将div元素放大50%。由于缩放，刷牙坐标不会更新

#test {
transform: scale(0.5);
}

谢谢

---

Deok

如果使用基于svg的转换：

transform="scale(0.5)"

然后它会很好地使用画笔：

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg = svg.append("g")
    .attr("transform","scale(0.5)");

更新

要修正计算，需要两件事

一,。缩放与div相对的区段矩形：

.extent {
   transform: scale(2);
}

二,。修复范围计算：

   .on("brush", function() {
      var extent = d3.event.target.extent();
      node.classed("selected", function(d) {
        return extent[0][0] <= d.x && d.x < extent[1][0] && 
               extent[0][1] <= (d.y/2) && (d.y/2) < extent[1][1]; // scale y opposite div transform
      });
   });

---

新示例。

如果使用CSS转换，则应将其应用于与节点相关的所有类：

 .node {
  stroke: #fff;
  stroke-width: 1.5px;
  transform: scale(0.5);
 }

 .node .selected {
        stroke: red;
  }

.link {
   stroke: #999;
     transform: scale(0.5);
  }

.brush .extent {
  fill-opacity: .1;
  stroke: #fff;
  shape-rendering: crispEdges;
  transform: scale(0.5);
}

添加变换时：scale0.5；可以笔刷所有节点。尝试从左到右越过节点位置

 var width = 960,height = 500;
  var svg = d3.select("#body").append("svg")
        .attr("width", width)
        .attr("height", height);


    graph.links.forEach(function(d) {
        d.source = graph.nodes[d.source];
        d.target = graph.nodes[d.target];
    });

    var link = svg.append("g")
        .attr("class", "link")
        .selectAll("line")
        .data(graph.links)
        .enter().append("line")
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    var node = svg.append("g")
        .attr("class", "node")
        .selectAll("circle")
        .data(graph.nodes)
        .enter().append("circle")
        .attr("r", 4)
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

    var brush = svg.append("g")
        .attr("class", "brush")
        .call(d3.svg.brush()
            .x(d3.scale.identity().domain([0, width]))
            .y(d3.scale.identity().domain([0, height]))
            .on("brush", function() {
                var extent = d3.event.target.extent();
                node.classed("selected", function(d) {
                    return extent[0][0] <= d.x && d.x < extent[1][0]
                        && extent[0][1] <= d.y && d.y < extent[1][1];
                });
            }));

---

完成JSFIDLE。

您可以找到单鼠标事件的类似问题。它建议使用以下代码在原始坐标之间进行转换。但是如果有人能为笔刷事件指出合适的方法，那就太好了。你的JSFIDLE给了我一个错误。很抱歉，正确的链接是谢谢你的友好回答。但是，由于项目中的设置，我无法访问svg。所以我正在寻找基于css的转换的解决方案。@intuinno，你没有svg的访问权限吗？如果您将转换保留在CSS中，则必须在笔刷计算中考虑它。是的。听起来很奇怪，我没有访问svg的权限。我的情况是，我正在jsplumb对象内部使用d3可视化。jsplumb对象使用css转换处理div上的缩放。我必须在div中的svg上刷一些区域。因此我无法应用您的解决方案。你能告诉我更多关于刷子计算的信息吗？@intuinno，看看新的答案。谢谢你的回答。但是，我不确定您是否共享了正确的JSFIDLE链接。在您共享的JSFIDLE中，bug仍然存在。请你再检查一下好吗？这是正确的链接，因为域[0，宽度]最好的笔刷是从左到右。从页面的左侧位置开始，拖动到页面的右侧位置，笔刷将正常工作。不，在我看来，笔刷坐标与鼠标位置略有不同。我认为这并不能解决css转换的笔刷问题。我很抱歉。