Question

我正在寻找一种根据节点集中的变量显示和隐藏节点的简单方法。

我有3个复选框FTSE 100 FTSE 250 FTSE ALL Share和我的节点有一个变量索引，它是FTSE 100,250，allshare所以每当用户选择FTSE 100时，我想只显示具有FTSE索引的节点，依此类推其余的复选框选项。

数据示例：

var dataset = {"nodes":[{"fullName":"Ultra Electronics Holdings plc","index":"FTSE 250"},{"fullName":"Unilever PLC","index":"FTSE 100"},{"fullName":"United Utilities Group PLC","index":"FTSE 100"},{"fullName":"Victrex plc","index":"FTSE 250"},{"fullName":"Vectura Group plc","index":"FTSE 250"},{"fullName":"Vp plc","index":"FTSE All-Share"},{"fullName":"VPC Specialty Lending Investments Plc","index":"FTSE All-Share"},{"fullName":"Wincanton plc","index":"FTSE All-Share"},{"fullName":"Workspace Group plc","index":"FTSE 250"},{"fullName":"William Hill plc","index":"FTSE 250"},{"fullName":"Witan Pacific Investment Trust PLC","index":"FTSE All-Share"},{"fullName":"Worldpay Group plc","index":"FTSE 100"},{"fullName":"Witan Investment Trust plc","index":"FTSE 250"},{"fullName":"Whitbread PLC","index":"FTSE 100"},{"fullName":"Worldwide Healthcare Trust PLC","index":"FTSE 250"},{"fullName":"Xaar plc","index":"FTSE All-Share"},{"fullName":"Zoopla Property Group Plc","index":"FTSE 250"}],"edges":[{"source":0,"target":68,"officers":["PARKER, Thomas, Sir"]},{"source":0,"target":147,"officers":["STEVENS, Anne"]},{"source":0,"target":286,"officers":["PARKER, Thomas, Sir"]},{"source":0,"target":341,"officers":["GROTE, Byron"]},{"source":0,"target":363,"officers":["GROTE, Byron"]},{"source":1,"target":2,"officers":["ABERDEEN ASSET MANAGEMENT PLC","YOUNG, Hugh"]},{"source":1,"target":7,"officers":["GILBERT, Martin","YOUNG, Hugh"]},{"source":1,"target":23,"officers":["ABERDEEN ASSET MANAGEMENT PLC"]},{"source":1,"target":67,"officers":["YEA, Philip"]},{"source":1,"target":98,"officers":["ABERDEEN ASSET MANAGEMENT PLC"]},{"source":1,"target":102,"officers":["ABERDEEN ASSET MANAGEMENT PLC"]},{"source":1,"target":150,"officers":["YEA, Philip"]},{"source":1,"target":254,"officers":["ABERDEEN ASSET MANAGEMENT PLC"]},{"source":1,"target":255,"officers":["ABERDEEN ASSET MANAGEMENT PLC"]}]};

和d3代码

var w = 1200;
var h = 800;

var viewBoxX = 0, viewBoxY = 0;

var force = d3.layout.force()
             .nodes(dataset.nodes)
             .links(dataset.edges)
             .size([w, h])
             .linkDistance([100])
             .charge([-240])
             .gravity(0.07)
             .start();

var colors = d3.scale.category10();

var svg = d3.select("#networkGraph")
            .append("svg")
            .attr("width", w)
            .attr("height", h)
            .attr("viewBox", "0 0 "+w+" "+h);

svg.append('rect')
              .classed('bg', true)
              .attr('stroke', 'transparent')
              .attr('fill', 'transparent')
              .attr("x", 0)
              .attr("y", 0)
              .attr('width', w)
              .attr('height', h)
              .call(zoom);

var container = svg.append("g")
                .classed("node-area", true)
                .attr("transform", "translate(0,0)");

var edge = container.selectAll(".edge")
            .data(dataset.edges)
            .enter()
            .append("g")
            .attr("class", "edge")
            .append("line")
            .attr("class", "link-edge")
            .style("stroke", function(d){return "rgb(0,"+(168-(officersScale(d.officers.length)*20))+","+(168-(officersScale(d.officers.length)*20))+")";})
                .style("stroke-width", function(d){return officersScale(d.officers.length);});
    var edgeText = container.selectAll(".edge")
                .append("text")
                .attr("dy", ".35em")
                .each(function(d){
var officers = ''; 
                                for (index = 0; index < d.officers.length; ++index) {
                                    d3.select(this).append("tspan")
                                        .text(d.officers[index])
                                        .attr("dy", index ? "1.2em" : 0)
                                        .attr("text-anchor", "middle")
                                        .attr("x", 0);
                                }
                            });

var node = container.selectAll(".node")
    .data(dataset.nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", 15)
    .style("fill", function(d,i){ 
    return colors(i)
        })
    .call(force.drag);

node.append("text")
    .attr("dx", 0)
    .attr("dy", "0.35em")
    .attr("font-weight", 600)
    .attr("text-anchor", "middle") 
    .style("pointer-events", "none") 
    .text(function(d){ return d.name});

这是我的onlcick函数尚未实现隐藏和显示节点。

document.getElementById('FTSE100').onclick = function() {
            if ( this.checked ) {
                console.log('FTSE 100');
            } else{
                console.log('-FTSE 100');
            }
        };

        document.getElementById('FTSE250').onclick = function() {
            if ( this.checked ) {
                console.log('FTSE 250');
            } else {
                console.log('-FTSE 250');
            }
        };

        document.getElementById('FTSEA-S').onclick = function() {
            if ( this.checked ) {
                console.log('FTSEA-S');
                document.getElementById("FTSE100").checked = true;
                document.getElementById("FTSE250").checked = true;
                document.getElementById("FTSE100").disabled = true;
                document.getElementById("FTSE250").disabled = true;
            } else {
                console.log('-FTSEA-S');
                document.getElementById("FTSE100").disabled = false;
                document.getElementById("FTSE250").disabled = false;
            }
        };

HTML位：

<div id="networkGraph">
        <div id="menuLeft">
            <button onclick="zoomFit(0.95, 500)">Center</button>
        </div>
        <div id="menuRight">
            <fieldset>
                <div>
                    <input type="checkbox" id="FTSE100"> 
                    <label for="FTSE100">FTSE 100</label>
                </div>
                <div>
                    <input type="checkbox" id="FTSE250">
                    <label for="FTSE250">FTSE 250</label>
                </div>
                <div>
                    <input type="checkbox" id="FTSEA-S">
                    <label for="FTSEA-S">FTSE All-Share</label>
                </div>
            </fieldset>
        </div>
    </div>

以及该程序实际外观的图片：

D3隐藏节点取决于

0 个答案: