单页中的多个d3图

Question

实际上我在浏览器中显示d3图表。现在，更改是在单个浏览器上显示d3图形的动态数量。所以我试图在我之前的div标签中再创建两个svg元素。但它没有用。但我提到的一些样本显示了同样的事情。

 <div id="container">
                <svg id="svgcontainer"></svg>
                <svg id="svgcontainer1"></svg>
                <svg id="svgcontainer2"></svg>
            </div>



   var svg = d3.select("#svgcontainer").attr("width", width)
                .attr("height", height);
            var svg1 = d3.select("#svgcontainer1").attr("width", width)
              .attr("height", height);
            var svg2 = d3.select("#svgcontainer2").attr("width", width)
              .attr("height", height);


            svg.append("defs").selectAll("marker")
           .data(["suit", "licensing", "resolved"])
         .enter().append("marker")
           .attr("id", function (d) { return d; })
           .attr("viewBox", "0 -5 10 10")
           .attr("refX", 12)
           .attr("refY", 0)
           .attr("markerWidth", 6)
           .attr("markerHeight", 6)
           .attr("orient", "auto")
         .append("path")
           .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
           .style("stroke", "#4679BD")
           .style("opacity", "1");

            svg1.append("defs").selectAll("marker")
          .data(["suit", "licensing", "resolved"])
        .enter().append("marker")
          .attr("id", function (d) { return d; })
          .attr("viewBox", "0 -5 10 10")
          .attr("refX", 12)
          .attr("refY", 0)
          .attr("markerWidth", 6)
          .attr("markerHeight", 6)
          .attr("orient", "auto")
        .append("path")
          .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
          .style("stroke", "#4679BD")
          .style("opacity", "1");

            svg2.append("defs").selectAll("marker")
          .data(["suit", "licensing", "resolved"])
        .enter().append("marker")
          .attr("id", function (d) { return d; })
          .attr("viewBox", "0 -5 10 10")
          .attr("refX", 12)
          .attr("refY", 0)
          .attr("markerWidth", 6)
          .attr("markerHeight", 6)
          .attr("orient", "auto")
        .append("path")
          .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
          .style("stroke", "#4679BD")
          .style("opacity", "1");

但它不起作用。

我在这里添加整个代码。

  <div class="context-menu-one box menu-1">
            <div id="container">
                <svg id="svgcontainer"></svg>

                <svg id="svgcontainer1"></svg>

                <svg id="svgcontainer2"></svg>
            </div>
        </div>
        <canvas width="400" height="400"></canvas>

        <script src="http://d3js.org/d3.v3.min.js"></script>
        <%--to add tooltip for node--%>
        <script type='text/javascript' src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"> </script>
        <script>


            var selectednode;
            console.log(document.getElementById("hdnLink").value);
            var graph = JSON.parse(document.getElementById("hdnLink").value);

            // for TFL graph
            var width = 4000,
                height = 4000;

            //var width = 3000,
            //    height = 3000;
            debugger;

            var color = d3.scale.category20();





            var force = d3.layout.force()
            //.charge(-3000)
                .charge(function (d) { return d.degree * -250; })
            .chargeDistance(500)
            .linkDistance(5)
            .size([width, height]);

            //var svg = d3.select("#container").append("svg")
            //    .attr("width", width)
            //    .attr("height", height);

            var svg = d3.select("#svgcontainer").attr("width", width)
                .attr("height", height);
            var svg1 = d3.select("#svgcontainer1").attr("width", width)
              .attr("height", height);
            var svg2 = d3.select("#svgcontainer2").attr("width", width)
              .attr("height", height);


            svg.append("defs").selectAll("marker")
           .data(["suit", "licensing", "resolved"])
         .enter().append("marker")
           .attr("id", function (d) { return d; })
           .attr("viewBox", "0 -5 10 10")
           .attr("refX", 12)
           .attr("refY", 0)
           .attr("markerWidth", 6)
           .attr("markerHeight", 6)
           .attr("orient", "auto");

            svg.append("path")
              .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
              .style("stroke", "#4679BD")
              .style("opacity", "1");

            svg1.append("defs").selectAll("marker")
          .data(["suit", "licensing", "resolved"])
        .enter().append("marker")
          .attr("id", function (d) { return d; })
          .attr("viewBox", "0 -5 10 10")
          .attr("refX", 12)
          .attr("refY", 0)
          .attr("markerWidth", 6)
          .attr("markerHeight", 6)
          .attr("orient", "auto");
            svg1.append("path")
              .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
              .style("stroke", "#4679BD")
              .style("opacity", "1");

            svg2.append("defs").selectAll("marker")
          .data(["suit", "licensing", "resolved"])
        .enter().append("marker")
          .attr("id", function (d) { return d; })
          .attr("viewBox", "0 -5 10 10")
          .attr("refX", 12)
          .attr("refY", 0)
          .attr("markerWidth", 6)
          .attr("markerHeight", 6)
          .attr("orient", "auto");

            svg2.append("path")
              .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
              .style("stroke", "#4679BD")
              .style("opacity", "1");


            ARROW_SHIFT = 1;
            var link = svg.selectAll(".link")
                .data(graph.links)
              .enter().append('svg:path')
                //.attr("class", "link")
                .style("stroke", "rgba(0, 0, 0, 1)")
                //.attr("display", "none")
                .attr("display", function (d) {
                    if (document.getElementById("chkShowAnimation").checked == true) {
                        return null;
                    }
                    else
                        return "none";
                })
                .style("stroke-width", function (d) { return Math.sqrt(d.value); })
               .style("marker-end", "url(#suit)")
                .attr('marker-start', function (d) {
                    return d.birectional ? 'url(#start-arrow)' : null;
                });

            var link1 = svg1.selectAll(".link")
               .data(graph.links)
             .enter().append('svg1:path')
               //.attr("class", "link")
               .style("stroke", "rgba(0, 0, 0, 1)")
               //.attr("display", "none")
               .attr("display", function (d) {
                   if (document.getElementById("chkShowAnimation").checked == true) {
                       return null;
                   }
                   else
                       return "none";
               })
               .style("stroke-width", function (d) { return Math.sqrt(d.value); })
              .style("marker-end", "url(#suit)")
               .attr('marker-start', function (d) {
                   return d.birectional ? 'url(#start-arrow)' : null;
               });

            var link2 = svg2.selectAll(".link")
               .data(graph.links)
             .enter().append('svg2:path')
               //.attr("class", "link")
               .style("stroke", "rgba(0, 0, 0, 1)")
               //.attr("display", "none")
               .attr("display", function (d) {
                   if (document.getElementById("chkShowAnimation").checked == true) {
                       return null;
                   }
                   else
                       return "none";
               })
               .style("stroke-width", function (d) { return Math.sqrt(d.value); })
              .style("marker-end", "url(#suit)")
               .attr('marker-start', function (d) {
                   return d.birectional ? 'url(#start-arrow)' : null;
               });

            var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
    return d.name + " , " + d.group;
})
            svg.call(tip);
            svg1.call(tip);
            svg2.call(tip);

  

此示例的输入是

{＆＃34;节＆＃34; ：[{＆＃34; name＆＃34;：＆＃34; NithyaShree＆＃34;，＆＃34; group＆＃34;：＆＃34; Family1＆＃34;，＆＃34; degree＆＃34;：2， ＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;＆＃34;点击的＆＃34;：＆＃34假＃34;＆＃34; colorname＆＃34;：＆＃34;＃FFFFFF＆＃34;＆＃34; optionid＆＃34;：＆＃34; 310477＆＃34;}，{＆＃34;名称＆＃34 ;：＆＃34; SowmyaShree＆＃34;＆＃34;组＆＃34;：＆＃34;天伦之乐＆＃34;＆＃34;度＆＃34;：2＆＃34;不透明度＆＃34;：＆ ＃34; 1＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;＆＃34;点击的＆＃34;：＆＃34;假＆＃34;＆＃34; colorname＆＃ 34;：＆＃34;＃FFFFFF＆＃34;＆＃34; optionid＆＃34;：＆＃34; 310478＆＃34;}，{＆＃34;名称＆＃34;：＆＃34; Lakshmanan＆＃34; ＆＃34;组＆＃34;：＆＃34;天伦之乐＆＃34;＆＃34;度＆＃34;：2＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃ 34;突出＆＃34;：＆＃34;假＆＃34;＆＃34;点击的＆＃34;：＆＃34;假＆＃34;＆＃34; colorname＆＃34;：＆＃34;＃FFFFFF＆＃ 34;，＆＃34; optionid＆＃34;：＆＃34; 310479＆＃34;}，{＆＃34;名称＆＃34;：＆＃34; Rajeshwari＆＃34;＆＃34;组＆＃34 ;: ＆＃34;天伦之乐＆＃34;＆＃34;度＆＃34;：6，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;突出＆＃34;：＆＃34假＃34;＆＃34;点击的＆＃34;：＆＃34;假＆＃34;＆＃34;色名称＆＃34;：＆＃34;＃FFFFFF＆＃34;＆＃34; optionid＆＃34;：＆＃34; 310480＆＃34;}，{＆＃34;名称＆＃34;：＆＃34;拉维＆＃ 34;，＆＃34;组＆＃34;：＆＃34; Family2＆＃34;＆＃34;度＆＃34;：2＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34 ;, ＆＃34;突出＆＃34;：＆＃34;假＆＃34;＆＃34;点击的＆＃34;：＆＃34;假＆＃34;＆＃34; colorname＆＃34;：＆＃34;＃ FFFFFF＆＃34;＆＃34; optionid＆＃34;：＆＃34; 310481＆＃34;}，{＆＃34;名称＆＃34;：＆＃34;克米＆＃34;＆＃34;组＆＃34 ;：＆＃34; Family2＆＃34;＆＃34;度＆＃34;：5，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;突出＆＃34;：＆ ＃34;假＆＃34;＆＃34;点击的＆＃34;：＆＃34;假＆＃34;＆＃34; colorname＆＃34;：＆＃34;＃FFFFFF＆＃34;＆＃34; optionid＆ ＃34;：＆＃34; 310482＆＃34;}，{＆＃34;名称＆＃34;：＆＃34;普加＆＃34;＆＃34;组＆＃34;：＆＃34; Family2＆＃34; ＆＃34;度＆＃34;：2＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;＆＃ 34;点击的＆＃34;：＆＃34;假＆＃34;＆＃34; colorname＆＃34;：＆＃34;＃FFFFFF＆＃34;＆＃34; optionid＆＃34;：＆＃34; 310483＆＃ 34;}，{＆＃34;名称＆＃34;：＆＃34;哈里什＆＃34;＆＃34;组＆＃34;：＆＃34; Family3＆＃34;＆＃34;度＆＃34 ;: 2，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;＆＃34;点击＆＃34;：＆＃34;假＆＃34;＆＃34; colorname＆＃34;：＆＃34;＃FFFFFF＆＃34;＆＃34; optionid＆＃34;：＆＃34; 310484＆＃34; }，{＆＃34;名称＆＃34;：＆＃34;吉里什＆＃34;＆＃34;组＆＃34;：＆＃34; Family3＆＃34;＆＃34;度＆＃34;：5， ＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;＆＃34;点击的＆＃34;：＆＃34假＃34;＆＃34; colorname＆＃34;：＆＃34;＃FFFFFF＆＃34;＆＃34; optionid＆＃34;：＆＃34; 310485＆＃34;}，{＆＃34;名称＆＃34 ;：＆＃34;拉克斯曼＆＃34;＆＃34;组＆＃34;：＆＃34; Family3＆＃34;＆＃34;度＆＃34;：2＆＃34;不透明度＆＃34;：＆ ＃34; 1＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;＆＃34;点击的＆＃34;：＆＃34;假＆＃34;＆＃34; colorname＆＃ 34;：＆＃34;＃FFFFFF＆＃34;＆＃34; optionid＆＃34;：＆＃34; 310486＆＃34;}，{＆＃34;名称＆＃34;：＆＃34; Kirthi＆＃34; ＆＃34;组＆＃34;：＆＃34; Family4＆＃34;＆＃34;度＆＃34;：5，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃ 34;突出＆＃34;：＆＃34;假＆＃34;＆＃34;点击的＆＃34;：＆＃34;假＆＃34;＆＃34; colorname＆＃34;：＆＃34;＃FFFFFF＆＃ 34;，＆＃34; optionid＆＃34;：＆＃34; 310487＆＃34;}，{＆＃34;名称＆＃34;：＆＃34;萨兰＆＃34;＆＃34;组＆＃34 ;: ＆＃34; Family4＆＃34;＆＃34;度＆＃34;：2＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34 ;，＆＃34;突出＆＃34;：＆＃34;假＆＃34;＆＃34;点击的＆＃34;：＆＃34;假＆＃34;＆＃34; colorname＆＃34;：＆＃34 ;＃FFFFFF＆＃34;＆＃34; optionid＆＃34;：＆＃34; 310488＆＃34;}，{＆＃34;名称＆＃34;：＆＃34; Selvaraj＆＃34;＆＃34;基团＃34;：＆＃34; Family4＆＃34;＆＃34;度＆＃34;：2＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;突出＆＃34; ：＆＃34;假＆＃34;＆＃34;点击＆＃34;：＆＃34;假＆＃34;＆＃34; colorname＆＃34;：＆＃34;＃FFFFFF＆＃34;＆＃34 ; optionid＆＃34;：＆＃34; 310489＆＃34;}]，＆＃34;链接＆＃34; ：[{＆＃34; source＆＃34;：0，＆＃34; target＆＃34;：3，＆＃34; Opacity＆＃34;：＆＃34; 1＆＃34;，＆＃34; strength＆＃34 ;：＆＃34; 0.100000＆＃34;＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;}，{ ＆＃34;源＆＃34;：1，＆＃34;目标＆＃34;：3，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;强度＆＃34;：＆ ＃34; 0.100000＆＃34;＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;}，{＆＃34 ;源＆＃34;：2＆＃34;目标＆＃34;：3，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;强度＆＃34;：＆＃34; 0.100000＆＃34;＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;}，{＆＃34;源＆＃ 34;：3，＆＃34;目标＆＃34;：3，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;强度＆＃34;：＆＃34; 0.500000＆＃ 34;，＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;}，{＆＃34;源＆＃34 ;: 4，＆＃34;目标＆＃34;：5，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;强度＆＃34;：＆＃34; 0.100000＆＃34 ;, ＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;}，{＆＃34;源＆＃34;：5，＆ ＃34;目标＆＃34;：5，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34; STR ength＆＃34;：＆＃34; 0.400000＆＃34;＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34; }，{＆＃34;源＆＃34;：6，＆＃34;目标＆＃34;：5，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;强度＆＃34 ;：＆＃34; 0.100000＆＃34;＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;}，{ ＆＃34;源＆＃34;：7，＆＃34;目标＆＃34;：8，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;强度＆＃34;：＆ ＃34; 0.100000＆＃34;＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;}，{＆＃34 ;源＆＃34;：8，＆＃34;目标＆＃34;：8，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;强度＆＃34;：＆＃34; 0.400000＆＃34;＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;}，{＆＃34;源＆＃ 34;：9，＆＃34;目标＆＃34;：8，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;强度＆＃34;：＆＃34; 0.100000＆＃ 34;，＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆＃34;假＆＃34;}，{＆＃34;源＆＃34 ;: 10，＆＃34;目标＆＃34;：10，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃34;＆＃34;强度＆＃34;：＆＃34; 0.400000＆＃34 ;, ＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34; HIG hlight＆＃34;：＆＃34;假＆＃34;}，{＆＃34;源＆＃34;：11，＆＃34;目标＆＃34;：10，＆＃34;不透明度＆＃34;：＆＃34 1＆＃34;＆＃34;强度＆＃34;：＆＃34; 0.100000＆＃34;＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34 ;：＆＃34;假＆＃34;}，{＆＃34;源＆＃34;：12，＆＃34;目标＆＃34;：10，＆＃34;不透明度＆＃34;：＆＃34; 1＆＃ 34;，＆＃34;强度＆＃34;：＆＃34; 0.100000＆＃34;＆＃34;双向＆＃34;：＆＃34;假＆＃34;＆＃34;突出＆＃34;：＆ ＃34; false＆＃34;}]}

Answer 1

问题在于，您对D3处理方法链的方式略有误解。例如，以下内容将在<a>的{​​{1}}中创建<p>代码：

<div>

您正在做的是创建以下DOM：

d3.select("body")
  .append("div")
  .attr("class", "test")
  .append("p")
  .append("a");

问题在于<svg> <defs> <marker> <path/> </marker> </defs> </svg> 坐在<path>内是没有意义的。相反，你想重新选择你的<defs>并像这样添加它（注意你的代码实际上没有渲染太多屏幕，只有3个小行）：

<svg>

var width = 300;
var height = 300;

var svg = d3.select("#svgcontainer").attr("width", width)
    .attr("height", height);
var svg1 = d3.select("#svgcontainer1").attr("width", width)
    .attr("height", height);
var svg2 = d3.select("#svgcontainer2").attr("width", width)
    .attr("height", height);


svg.append("defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
    .enter().append("marker")
    .attr("id", function(d) {
        return d;
    })
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 12)
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto");

svg.append("path")
    .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
    .style("stroke", "#4679BD")
    .style("opacity", "1");

svg1.append("defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
    .enter().append("marker")
    .attr("id", function(d) {
        return d;
    })
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 12)
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto");

svg1.append("path")
    .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
    .style("stroke", "#4679BD")
    .style("opacity", "1");

svg2.append("defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
    .enter().append("marker")
    .attr("id", function(d) {
        return d;
    })
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 12)
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto");

svg2.append("path")
    .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
    .style("stroke", "#4679BD")
    .style("opacity", "1");