Question

我有内嵌的svg代码，我已经将三个矩形元素从Inkscape复制到我的html文档中。我希望能够单击这些rects中的任何一个，并将它们全部三个显示在屏幕右侧的单独div中，放大。我已将每个单独的rect括在带有ID的g元素中。我还将所有三个rect括在＆＃34; section1＆＃34;。

的类标记中

这里是小提琴：https://jsfiddle.net/hh2ek44m/

我尝试过各种类似的组合，将点击的g元素或g元素组附加到#zoombox div。

                d3.selectAll("g")
                        .on("click", function(d) {
                    d3.select("#zoombox").append("#section1")
                        });

我还尝试过使用＆＃39;这个＆＃39;。

在我的工作文件（非常大）中，我有许多行在屏幕上看起来太小而无法直观检查，我希望用户能够点击放大一行中的一行。屏幕上的单独空间。我希望原始行保持不变，并且在单击新部分时更新放大部分图像区域。

我知道我在这里问了很多，所以如果你能把我推向正确的方向，我会很感激。

我查看了许多点击行为的示例，例如http://bl.ocks.org/eesur/4e0a69d57d3bfc8a82c2和http://bl.ocks.org/d3noob/5d621a60e2d1d02086bf。我最终希望我的三行位于页面的左侧，左侧的三个放大图像，类似于这个美丽的d3 vis，http://bl.ocks.org/syntagmatic/0613ee9324e989a6fb6b。感谢。

Answer 1

此代码存在一些问题：

d3.selectAll("g").on("click", function(d) {
    d3.select("#zoombox").append("#section1")
});

首先，由于#zoombox是<div>，因此您无法直接向其附加SVG元素。你必须先附加一个SVG：

d3.select("#zoombox").append("svg")

但是，即使这样做，下一步也不简单：你不能为它附加一个ID。所以，你可以附加一个选择：

var myGroup = d3.select("#section1")

但是这也行不通，因为选择是一个数组。逻辑解决方案是使用SVG元素本身：

var myGroup = d3.select("#section1").node()

但是，再次，这不起作用！

解决方案（众多中）：使用SVG use元素：

var myGroup = d3.select(".section1");

var myGroupId = d3.select(myGroup).node().attr("id");//get the ID of the group

myGroup.on("click", function(){
    d3.select("#zoombox")
        .append("svg")
        .append("use")
        .attr("xlink:href", "#" + myGroupId);//the ID of the cloned group
});

这是一个演示（我改变了你的SVG，这个片段太大了），点击你的组来克隆它：

var myGroup = d3.select(".section1");
var myGroupId = d3.select(myGroup).node().attr("id");

myGroup.on("click", function(){
	d3.select("#zoombox").append("svg").append("use").attr("xlink:href", "#" + myGroupId);
});

div {
  display: inline-block;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id ="zoombox"></div>
   
   <svg width="100">
   
   <g class = "section1" id="myUniqueID">
   
   <g id="section114r1">
   <rect 
        fill="0000ff"
        id="section114r1"
        width="3"
        height="30"
        x="35.0462"
        y="58.15918" /></g>
        
    <g id="section114r2"><rect
        fill="#0000ff"
        id="section114r2"
        width="3"
        height="30"
        x="30.88818"
        y="58.159" /></g>
        <g id="section114r3">
        
        <rect
        fill="#0000ff"
        id="section114r3"
        width="3"
        height="30"
        x="26.73694"
        y="58.15927" /></g>
        
            <g id="section114r4"><rect
        fill="#0000ff"
        id="section114r4"
        width="3"
        height="30"
        x="22.56696"
        y="58.17471" /></g>
				
        </g>

        </svg>

d3在点击时附加g元素的副本以分隔div

1 个答案: