如何在d3 venn.js javascript中实现所有节点

时间:2019-01-16 05:39:19

标签: javascript d3.js venn-diagram

我已经在代码中的javascript中实现了d3venn.js。维恩图代码会覆盖重复的集合。但是我希望该节点也出现,因为它属于不同的Api参数。就像我的设置和代码是-

venn.js

sets = [{sets: ["output"], size: 12, value: "return"}

{sets: ["txnstatus"], size: 12, value: "return"},

{sets: ["folderindex"], size: 12, value: "return"},

{sets: ["processinstanceid"], size: 12, value: "return"},

{sets:["output", "txnstatus"], size: 2, value: 2},

{sets: ["output", "folderindex"], size: 2, value: 2},

{sets: ["output", "processinstanceid"], size: 2, value: 2},

{sets: ["txnstatus", "folderindex"], size: 2, value: 2},

{sets: ["txnstatus", "processinstanceid"], size: 2, value: 2},

{sets: ["folderindex", "processinstanceid"], size: 2, value: 2},

{sets: ["disconparams"], size: 12, value: "cabinetname"},

{sets: ["input"], size: 12, value: "disconparams"},

{sets: ["cabinetname"], size: 12, value: "disconparams"},

{sets: ["userdbid"], size: 12, value: "disconparams"},

{sets: ["input", "cabinetname"], size: 2, value: 2},

{sets: ["input", "userdbid"], size: 2, value: 2},

{sets: ["cabinetname", "userdbid"], size: 2, value: 2},

sets: ["disconparams"], size: 12, value: "userdbid"},

{sets: ["return_2"], size: 12, value: "userdbid"},

{sets:  ["disconparams", "return_2"], size: 2, value: 2}
]



 console.log("sets=",sets)
  console.log("sets.length = ", sets.length)

  var lengthWidthHeights = [
    // min, max, width, height
    [0, 24, 800, 800],
    [25, 50, 1000, 1000],
    [51, 100, 1500, 1500]

  ];



  var chart;
  var foundItem = lengthWidthHeights.find(([min, max]) => length >= min && length <= max);
  if (foundItem) {
           const [,,width, height] = foundItem;

    chart = venn.VennDiagram().wrap(false) .fontSize("18px").width(width).height(height);


  }



function annotateSizes() {
  d3.select(this).select("text")
      .append("tspan")
      .text(function(d) { return "of: " + d.value; })
      .attr("x", function() { return d3.select(this.parentNode).attr("x"); })
      .attr("dy", "1.5em")
      .style("fill", "#666")
      .style("font-size", "14px")


}     

function updateVenn(sets) {
  var div = d3.select("#venn").datum(sets);
  var layout = chart(div),
      textCentres = layout.textCentres;
  div.selectAll(".label").style("fill", "white");
  div.selectAll(".venn-circle path").style("fill-opacity", .6);


div.selectAll("g").transition("venn").each("end", annotateSizes).duration(0);



  return layout;
}

updateVenn(sets);

**图片-**

venn

在此集合中,节点“ disconparams”在两个事件中单独出现-

  

1

     

{sets:[“ disconparams”],大小:12,值:“ userdbid”},

     

[2]

     

{sets:[“ disconparams”],大小:12,值:“ cabinetname”},

在此,机柜名称的“ disconparams”将覆盖userdbid的“ disconparams”。我不希望那样发生。我希望所有节点都出现在维恩图中。没有什么可以被覆盖。 请建议

0 个答案:

没有答案