单个页面中的多个 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);

这个样本的输入是

{"nodes" : [{"name":"NithyaShree","group":"Family1","degree":2,"Opacity":"1","highlight":"false","clicked ":"false","colorname":"#FFFFFF","optionid":"310477"},{"name":"SowmyaShree","group":"Family1","degree":2,"Opacity" :"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310478"},{"name":"Lakshmanan","group ":"Family1","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":" 310479"},{"name":"Rajeshwari","group":"Family1","degree":6,"Opacity":"1","highlight":"false","clicked":"false" ,"colorname":"#FFFFFF","optionid":"310480"},{"name":"Ravi","group":"Family2","degree":2,"Opacity":"1", "highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310481"},{"name":"Komi","group":"Family2" ,"度数":5,"不透明度":"1","highlight":"false","点击":"false","colorname":"#FFFFFF","optionid":"310482"},{ "name":"Pooja","group":"Family2","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname": "#FFFFFF","选项nid":"310483"},{"name":"Harish","group":"Family3","degree":2,"Opacity":"1","highlight":"false","clicked" :"false","colorname":"#FFFFFF","optionid":"310484"},{"name":"Girish","group":"Family3","degree":5,"Opacity": "1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310485"},{"name":"Laxman","group" :"Family3","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310486 "},{"name":"Kirthi","group":"Family4","degree":5,"Opacity":"1","highlight":"false","clicked":"false", "colorname":"#FFFFFF","optionid":"310487"},{"name":"Saran","group":"Family4","degree":2,"Opacity":"1"," highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310488"},{"name":"Selvaraj","group":"Family4", “度数”：2，“不透明度”：“1”，“高亮”：“假”，“点击”：“假”，“颜色名称”：“#FFFFFF”，“optionid”：“310489”}]，“链接”：[{“源”：0，“目标”：3，“不透明度”：“1”，“强度”：“0.100000”，“双向”：“假”，“高亮”：“假”}， {“来源”：1，“目标”： 3,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"},{"source":2,"target":3,"Opacity ":"1","strength":"0.100000","bidirectional":"False","highlight":"false"},{"source":3,"target":3,"Opacity":"1 ","strength":"0.500000","bidirectional":"False","highlight":"false"},{"source":4,"target":5,"Opacity":"1","strength ":"0.100000","双向":"False","highlight":"false"},{"source":5,"target":5,"Opacity":"1","strength":"0.400000 ","双向":"False","highlight":"false"},{"source":6,"target":5,"Opacity":"1","strength":"0.100000","双向":"False","highlight":"false"},{"source":7,"target":8,"Opacity":"1","strength":"0.100000","bidirectional":"False ","highlight":"false"},{"source":8,"target":8,"Opacity":"1","strength":"0.400000","bidirectional":"False","highlight ":"false"},{"source":9,"target":8,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false "},{"source":10,"target":10,"Opacity":"1","strength":"0.400000","bidirectional":"False", "highlight":"false"},{"source":11,"target":10,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight": "false"},{"source":12,"target":10,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"} ] }

Answer 1

问题是你稍微误解了D3 是如何使用它的方法链接的。以下示例将在<p> 中的<div> 中创建<a> 标记：

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

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

<svg>
   <defs>
      <marker>
         <path/>
      </marker>
   </defs>
</svg>

问题是<path> 坐在<defs> 中是没有意义的。相反，您想重新选择您的 <svg> 并像这样添加它（请注意，您的代码实际上并没有在屏幕上呈现太多，只有 3 小行）：

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");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="container">
  <svg id="svgcontainer"></svg>
  <svg id="svgcontainer1"></svg>
  <svg id="svgcontainer2"></svg>
</div>