我们如何在树d3js中用不同的参数改变子节点,链接和节点位置的路径位置?

时间:2014-10-28 06:20:13

标签: javascript d3.js tree

我在d3js中使用了树形图,其中我被卡住,同时根据具有1个参数不同的子项定位一些路径,节点和链接以适合不同的位置。 所以,从中我们可以比较并且可以改变我们想要的任何东西,但是我无法在树形图d3js中找到比较的方法,并且在不同的方向上改变我的子节点路径和节点位。

我的json

    {"icon":"/images/OracleConnector.png","input":false,"category":"STAGE","level":"Green","details":"Identifier : V0S0 <br> Type : OracleConnectorPX <br> OutputPins : V0S0P1 <br> InputPins : null <br> Partner : null","name":"OraLOG_BOT_AS_ADDRESS","value":"5","children":[{"icon":"/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S0P1 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S4|V0S4P4","name":"LnkLogBotAsAddress","value":"5","children":[{"icon":"/images/PxJoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S4 <br> Type : PxJoin <br> OutputPins : V0S4P3 <br> InputPins : V0S4P4|V0S4P2 <br> Partner : null","name":"JoinLogBotAniraAddress","value":"5","children":[{"icon":"/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S4P3 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S7|V0S7P9","name":"LnkRdupBotAddress","value":"5","children":[{"icon":"/images/PxJoin.png","input":false,"category":"ETL","level":"Green","details":"Identifier : V0S7 <br> Type : PxJoin <br> OutputPins : V0S7P5 <br> InputPins : V0S7P9|V0S7P6 <br> Partner : null","name":"JoinBotAndSxp","value":"5","children":[{"icon":"/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S7P5 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S53|V0S53P1","name":"LnkAddress","value":"5","children":[{"icon":"/images/PxSVTransformer.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S53 <br> Type : CTransformerStage <br> OutputPins : V0S53P2|V0S53P3 <br> InputPins : V0S53P1 <br> Partner : null","name":"XfmNewAndUpdatedRecords","value":"5","children":[{"icon":"/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S53P2 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S56|V0S56P1","name":"LnkNewRecords","value":"5","children":[{"icon":"
/images/PxJoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S56 <br> Type : PxJoin <br> OutputPins : V0S56P3 <br> InputPins : V0S56P1|V0S56P2 <br> Partner : null","name":"JoinBotToSxpNewAddress","value":"5","children":[{"icon":"
/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S56P3 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S62|V0S62P4","name":"LnkNewRecordsToRdup","value":"5","children":[{"icon":"/images/PxDataSet.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S62 <br> Type : PxDataSet <br> OutputPins : null <br> InputPins : V0S62P4 <br> Partner : null","name":"DsLogBotAsAddressNew","value":"5","children":[{"icon":"/images/etljoin.png","input":true,"category":"ETL","level":"Green","details":"Identifier : V0S62P4 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S56|V0S56P3","name":"LnkNewRecordsToRdup","value":"5"}],"type":"PxDataSet"}]},{"icon":"/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S56P1 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S53|V0S53P2","name":"LnkNewRecords","value":"5"},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S56P2 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S55|V0S55P1","name":"LnkNewAddressLkp","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/OracleConnector.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S55 <br> Type : OracleConnectorPX <br> OutputPins : V0S55P1 <br> InputPins : null <br> Partner : null","name":"OraSxpAniraSohoOrder","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S55P1 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S56|V0S56P2","name":"LnkNewAddressLkp","value":"5"}],"type":"OracleConnectorPX"}]}],"type":"PxJoin"}]},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S53P3 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S45|V0S45P4","name":"LnkUpdatedRecords","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/PxSequentialFile.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S45 <br> Type : PxCopy <br> OutputPins : V0S45P5|V0S45P6 <br> InputPins : V0S45P4 <br> Partner : null","name":"CpyToSxpUpdatedAddress","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S45P5 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S25|V0S25P2","name":"LnkLogBotUpdatedAddress","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/PxDataSet.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S25 <br> Type : PxDataSet <br> OutputPins : null <br> InputPins : V0S25P2 <br> Partner : null","name":"DsLogBotAsAddressUpdated","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S25P2 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S45|V0S45P5","name":"LnkLogBotUpdatedAddress","value":"5"}],"type":"PxDataSet"}]},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S45P6 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S73|V0S73P1","name":"LnkUpdatedRecordsSrt","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/PxJoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S73 <br> Type : PxSort <br> OutputPins : V0S73P2 <br> InputPins : V0S73P1 <br> Partner : null","name":"SrtSxpAddress","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S73P2 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S72|V0S72P1","name":"LnkUpdatedRecordsFlt","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/PxJoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S72 <br> Type : PxFilter <br> OutputPins : V0S72P2 <br> InputPins : V0S72P1 <br> Partner : null","name":"FltSxpAddress","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S72P2 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S70|V0S70P2","name":"LnkUpdatedRecordsToSxp","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/OracleConnector.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S70 <br> Type : OracleConnectorPX <br> OutputPins : null <br> InputPins : V0S70P2 <br> Partner : null","name":"OraSxpAddressUpdate","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S70P2 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S72|V0S72P2","name":"LnkUpdatedRecordsToSxp","value":"5"}],"type":"OracleConnectorPX"}]},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S72P1 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S73|V0S73P2","name":"LnkUpdatedRecordsFlt","value":"5"}],"type":"PxFilter"}]},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S73P1 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S45|V0S45P6","name":"LnkUpdatedRecordsSrt","value":"5"}],"type":"PxSort"}]},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S45P4 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S53|V0S53P3","name":"LnkUpdatedRecords","value":"5"}],"type":"PxCopy"}]},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S53P1 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S7|V0S7P5","name":"LnkAddress","value":"5"}],"type":"CTransformerStage"}]},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S7P9 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S4|V0S4P3","name":"LnkRdupBotAddress","value":"5"},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S7P6 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S9|V0S9P1","name":"LnkSxpAniraAddressLkp","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/OracleConnector.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S9 <br> Type : OracleConnectorPX <br> OutputPins : V0S9P1 <br> InputPins : null <br> Partner : null","name":"OraSxpAddressAndOrder","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S9P1 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S7|V0S7P6","name":"LnkSxpAniraAddressLkp","value":"5"}],"type":"OracleConnectorPX"}]}],"type":"PxJoin"}]},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S4P4 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S0|V0S0P1","name":"LnkLogBotAsAddress","value":"5"},{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":true,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S4P2 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S1|V0S1P1","name":"LnkBotAniraAddress","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/OracleConnector.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S1 <br> Type : OracleConnectorPX <br> OutputPins : V0S1P1 <br> InputPins : null <br> Partner : null","name":"OraBotAniraSohoAddressAndOrder","value":"5","children":[{"icon":"/MetaDataDiscovery/resources/common/images/etljoin.png","input":false,"category":"ETL_STAGE","level":"Green","details":"Identifier : V0S1P1 <br> Type : null <br> OutputPins : null <br> InputPins : null <br> Partner : V0S4|V0S4P2","name":"LnkBotAniraAddress","value":"5"}],"type":"OracleConnectorPX"}]}],"type":"PxJoin"}]}],"type":"OracleConnectorPX"};

我对节点位置的路径......

link.enter().insert("path", "g")
            .attr("class", "link")
            .attr("marker-end", function(d) { 
                            return d.target.input == false ? "url(#arrowhead)" : "";
            })
            .attr("marker-start", function(d) { 
                    return d.target.input == true ? "url(#arrowdown)" : "";
            })
            .style("stroke", function(d) {
                    return d.target.input == false ? d.target.level : "red";
            })
            .attr("d", function(d) {

如果输入为true,那么我们需要改变路径的位置......

if(d.source.input == true)
{
    return_elbow = elbow(d);
    console.log("return_elbow", return_elbow);
    return return_elbow;
}
else
{
    var o = {x: source.x, y: source.y};
    return diagonal({source: o, target: o});
}

这里我添加路径并与输入进行比较...... 如果你知道的话,请查看代码和伙伴......请告诉我......

0 个答案:

没有答案