Javascript 使用d3.js在svg中拖动行为和响应

如何使用

d3.js

在

svg

中实现拖动行为和响应

所谓响应性，我的意思是，如果将大小调整为任何屏幕分辨率，我在

svg

元素中绘制的元素将保留其纵横比

在这种情况下，通过拖动行为，我的意思是，如果我将绘制过大的元素，或者如果我将从默认的

viewBox

中绘制它们，我希望用户能够足够地拖动场景，以便看到超出边界的元素

下面是我解决这个问题的不幸尝试： 我决定只使用

%

单元来完成响应。那么现在,，例如，当我画一个圆圈并将其

笔划宽度指定为
1%
时，然后我决定调整显示包含
圆圈的
svg
的窗口的大小，或者当将设备从PC更改为手机时，
笔划宽度实际上仍然是
1%
svg
元素。在这里，
svg
width
和
height
属性被设置为
100%
，以覆盖整个父级（例如
div
）

现在我想解决与合并拖动行为有关的问题。我可以说我有一些使用
viewBox
的基本技能。因此，我知道，如果
svg
属性
viewBox
，则可以通过操纵
x
和
y
属性轻松实现所需的拖动行为。我将只更改
x
和
y
，用户看到的
svg
部分可以更改（用户现在可以看到任何
svg
画布部分中的内容）。但问题是，我知道如何使用数字（任何不是
%
单位的单位）来实现这一点。因此，我希望
%
单元的行为相同。例如，
svg
始终具有固定的宽度和高度，即使它们（宽度和高度）在
%
中指定。因此，我希望当我将
viewBox的
x
属性设置为
100%
时，我将看到
svg
画布左侧的
100%
部分，并相应地确定
100%

这是我尝试的代码

以下是
.js
部分：

var svg = d3.select("#drawRegion")
                .append("svg")
                .attr("width", "100%")
                .attr("height", "100%");

svg.append("rect")
    .attr("x", "0")
  .attr("y", "0")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "yellow");


for(var i = 0; i < 10; ++i) {
svg.append("circle")
    .attr("cx", ((i*20)+10)+"%")
  .attr("cy", "50%")
  .attr("r", "5%")
  .attr("stroke", "black")
  .attr("stroke-width", "1%")
  .attr("fill", '#'+Math.floor(Math.random()*16777215).toString(16));
}
svg.viewBoxInfo = {
    x: 0,
    y: 0,
    width: "100%",
    height: "100%",
    maxX: 150,
    minX: 0,
    maxY: 0,
    minY: 0,
    stringRepresentation: function() {
      if(this.x > this.maxX) {
        this.x = this.maxX;
      } else if(this.x < this.minX) {
        this.x = this.minX;
      }

      if(this.y > this.maxY) {
        this.y = this.maxY
      } else if(this.y < this.minY) {
        this.y = this.minY;
      }

      return this.x + "% " + this.y + "% " + this.width + "% " + this.height + "%";
    }
};

 var prepareDraggingBehaviour = function(svg){
     var panning = null;
     var currentMouse = null;

     var onMouseDownSvg = function() {
       panning = d3.mouse(this);
     };
     var onMouseMoveSvg = function() {
       currentMouse = d3.mouse(this);
       if (panning)  {
         svg.viewBoxInfo.x += (panning[0] - currentMouse[0]);
         svg.viewBoxInfo.y += (panning[1] - currentMouse[1]);
         svg.attr("viewBox", svg.viewBoxInfo.stringRepresentation());
       }
     };
     var onMouseUpSvg = function() {
       panning = null;
     };

     svg.on("mousedown", onMouseDownSvg);
     svg.on("mousemove", onMouseMoveSvg);
     d3.select(window).on("mouseup", onMouseUpSvg);
 };
 prepareDraggingBehaviour(svg);

var svg=d3.选择（“drawRegion”）
.append（“svg”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）；
svg.append（“rect”）
.attr（“x”、“0”）
.attr（“y”、“0”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“填充”、“黄色”）；
对于（变量i=0；i<10；++i）{
svg.append（“圆”）
.attr（“cx”，（（i*20）+10）+“%”）
.attr（“cy”，“50%”）
.attr（“r”，“5%”）
.attr（“笔划”、“黑色”）
.attr（“笔划宽度”、“1%”）
.attr（“fill”、“#”+Math.floor（Math.random（）*16777215）.toString（16））；
}
svg.viewBoxInfo={
x:0,，
y:0，
宽度：“100%”，
高度：“100%”，
maxX:150，
minX:0，
马克西：0，
米尼：0，
stringRepresentation:function（）{
if（this.x>this.maxX）{
this.x=this.maxX；
}else if（this.xthis.maxY）{
this.y=this.maxY
}else if（this.y

当一切正常时，我收到一个错误，它告诉我
%
不能是
x
和
y
视图框
属性的值：

错误：属性视图框：预期数字为“150%0%100%%100%%”`

除了拖动行为，我还能尝试什么来获得响应性？将非常感谢您提供的任何帮助。
我认为您误解了
viewBox
的用途。它定义了在viewBort中可见的文档区域。在这里使用百分比单位是没有意义的。如果要查看视口右侧的文档区域，请将viewBox x设置为viewBox宽度。@PaulLeBeau，确定。
viewBox
宽度为
100%
，它不允许使用
viewBox
的
x
和
y
属性的百分比，因此，在这种情况下，我无法将
x
设置为等于
viewBox
的
width
。百分比单位在
viewBox
中的任何位置都无效。值必须是普通数字@PaulLeBeau，百分比作为
viewBox
的
width
和
height
属性值有效。不，它们不是。再次阅读viewBox的定义。上面写着“四个数字”。