第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

D3.js v5 構(gòu)建樹“矩陣”

D3.js v5 構(gòu)建樹“矩陣”

HUWWW 2023-11-02 20:06:03
目標(biāo)是以矩陣的形式優(yōu)雅地附加多個(gè)小樹圖。我已經(jīng)準(zhǔn)備了預(yù)期輸出的簡(jiǎn)單版本;矩形和文本顯示了圖案應(yīng)該是什么樣子。接下來(lái)需要做的是在矩形下方添加一個(gè)簡(jiǎn)單的兩級(jí)樹圖。我正在使用一種數(shù)據(jù)結(jié)構(gòu),其中樹數(shù)據(jù)存儲(chǔ)在對(duì)象數(shù)組的每個(gè)項(xiàng)目?jī)?nèi)的對(duì)象中:  var data = [    {name:"jackie chan", tree: {      "name": "Top Level",      "children": [            { "name": "Fund 1" },            { "name": "Fund 2" },            { "name": "Fund 3"}          ]    }},    {name:"jet li", tree: {      "name": "Top Level",      "children": [            { "name": "Fund 1" },            { "name": "Fund 2" },            { "name": "Fund 3"},            { "name": "Fund 4"},          ]    }},...我認(rèn)為我可以通過將所有樹方法封裝到一個(gè)大數(shù)據(jù)調(diào)用中來(lái)實(shí)現(xiàn)所需的結(jié)果,然后使用與代碼片段結(jié)果中所示相同的方法來(lái)附加矩形和文本:pmG.selectAll(null)    .data( function(d) {return miniTree(d3.hierarchy(d.tree).descendants().slice(1))})  .enter().append("path")    .attr("class", "link")    .attr("d", function(d) {       return "M" + d.x + "," + d.y         + "C" + d.x + "," + (d.y + d.parent.y) / 2         + " " + d.parent.x + "," +  (d.y + d.parent.y) / 2         + " " + d.parent.x + "," + d.parent.y;       });但是我得到了錯(cuò)誤:未捕獲的類型錯(cuò)誤:i.eachBefore 不是函數(shù)我以前從未見過這種錯(cuò)誤,我擔(dān)心會(huì)出現(xiàn)大問題。問題基于我的矩陣框架(查看如何在片段中附加矩形和文本),如何以類似的方式附加小“迷你樹”?
查看完整描述

1 回答

?
DIEA

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超3個(gè)贊

您在制作樹時(shí)遇到錯(cuò)誤:

 .data( function(d) {return miniTree(d3.hierarchy(d.tree).descendants().slice(1)) })

應(yīng)該:

 .data( function(d) {return miniTree(d3.hierarchy(d.tree)).descendants().slice(1)  })

你不想要 d3.hierarchy 的后代,但是 miniTree - 我第一次查看它時(shí)錯(cuò)過了它。

var margins = {top:100, bottom:300, left:100, right:100};


var height = 600;

var width = 900;


var totalWidth = width+margins.left+margins.right;

var totalHeight = height+margins.top+margins.bottom;


var svg = d3.select('body')

.append('svg')

.attr('width', totalWidth)

.attr('height', totalHeight);


var graphGroup = svg.append('g')

.attr('transform', "translate("+margins.left+","+margins.top+")");


  var data = [

    {name:"jackie chan", tree: {

      "name": "Top Level",

      "children": [

            { "name": "Fund 1" },

            { "name": "Fund 2" },

            { "name": "Fund 3"}

          ]

    }},

    {name:"jet li", tree: {

      "name": "Top Level",

      "children": [

            { "name": "Fund 1" },

            { "name": "Fund 2" },

            { "name": "Fund 3"},

            { "name": "Fund 4"},

          ]

    }},

    {name:"donnie yen", tree: {

      "name": "Top Level",

      "children": [

            { "name": "Fund 1" },

            { "name": "Fund 2" },

          ]

    }},

    {name:"chow yun fat", tree: {

      "name": "Top Level",

      "children": [

            { "name": "Fund 1" },

            { "name": "Fund 2" },

            { "name": "Fund 3"},

            { "name": "Fund 4"},

            { "name": "Fund 5"},

          ]

    }},

  ];


  //var formatComma = d3.format(",");


  var columns = 3;

  var spacing = 150;

  var vSpacing = 180;


  var pmG = graphGroup.selectAll('.pm')

    .data(data)

    .enter()

    .append('g')

    .attr('class', 'pm')

    .attr('id', (d, i) => 'pm' + i)

    .attr('transform', (d, k) => {

      var horSpace = (k % columns) * spacing;

      var vertSpace = ~~((k / columns)) * vSpacing;

      return "translate(" + horSpace + "," + vertSpace + ")";

    });


var miniTree = d3.tree()

    .size([150, 75]);


pmG.append('rect')

    .attr('x',0)

    .attr('y',0)

    .attr('width',100)

    .attr('height',25)

    .style('fill',"#003366");


pmG.append('text')

    .attr('x',50)

    .attr('y',-10)

    .attr('text-anchor','middle')

    .text(function(d) {return d.name});



pmG.selectAll(null)

    .data( function(d) { 

        return miniTree(d3.hierarchy(d.tree)).descendants().slice(1) 

        

        })

  .enter().append("path")

    .attr("transform", "translate(-25,20)") // extra positioning.

    .attr("class", "link")

    .attr("d", function(d) {

       return "M" + d.x + "," + d.y

         + "C" + d.x + "," + (d.y + d.parent.y) / 2

         + " " + d.parent.x + "," +  (d.y + d.parent.y) / 2

         + " " + d.parent.x + "," + d.parent.y;

       });


pmG.selectAll(null)

    .data( function(d) {return miniTree(d3.hierarchy(d.tree)).descendants() })

  .enter().append("g")

    .attr("class", function(d) {

      return "node" +

        (d.children ? " node--internal" : " node--leaf"); })

    .attr("transform", function(d) {

      return "translate(" + (d.x - 25) + "," + (d.y+20) + ")"; }) // with extra positioning.

      .append("circle")

path {

  stroke-width: 1px;

  fill: none;

  stroke: #003366;

}


circle {

  r: 5px;

  fill: #003366;

}

<script src="https://d3js.org/d3.v5.min.js"></script>


查看完整回答
反對(duì) 回復(fù) 2023-11-02
  • 1 回答
  • 0 關(guān)注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)