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

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

d3 不會在第一次運(yùn)行時附加圓圈

d3 不會在第一次運(yùn)行時附加圓圈

神不在的星期二 2022-12-29 13:52:48
我正在使用嵌套數(shù)據(jù)集和以下代碼在 d3 v5 中繪制圓圈:const scatterGroup = svg.selectAll(".scatterGroup").data(data);scatterGroup.exit().remove();scatterGroup  .enter()  .append("g")  .attr("class", "scatterGroup")  .attr("fill", (d, i) => color[i])  .attr("stroke", (d, i) => color[i])  .append("g")  .attr("class", "scatterPoints");const scatterPoints = scatterGroup  .selectAll(".scatterPoints")  .data((d) => d);scatterPoints  .enter()  .append("circle")  .attr("class", "scatterPoints")  .attr("cx", (d, i) => xScale(d.x))  .attr("cy", (d, i) => yScale(d.y))  .attr("r", 5);scatterPoints.exit().remove();const scatterUpdate = scatterGroup  .transition()  .duration(500)  .attr("fill", (d, i) => color[i])  .attr("stroke", (d, i) => color[i]);scatterPoints  .transition()  .duration(500)  .attr("cx", (d, i) => xScale(d.x))  .attr("cy", (d, i) => yScale(d.y));在提供數(shù)據(jù)的第一次運(yùn)行中沒有任何反應(yīng)??丶诘谝淮渭虞d時未到達(dá)追加圓圈。第二次加載數(shù)據(jù)時,d3 附加圓圈。誰能告訴我如何在首次提供數(shù)據(jù)時讓它們出現(xiàn)以及為什么會這樣?
查看完整描述

1 回答

?
慕尼黑的夜晚無繁華

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超6個贊

這是因?yàn)閿?shù)據(jù)是嵌套的,所以你需要.merge() scatterGroup 或者在創(chuàng)建之前重新選擇它scatterPoints。否則,scatterGroup仍然是空的,而scatterGroup.enter()持有所有的點(diǎn)。


我還.append(g).attr('class', 'scatterPoints')從您的代碼中刪除了,因?yàn)樗褂?ag而不是 acircle并且不需要存在


const svg = d3.select('svg');

const color = ['red', 'blue'];

const data = [

  [{

    x: 10,

    y: 10

  }, {

    x: 40,

    y: 100

  }],

  [{

    x: 25,

    y: 50

  }]

];

const newData = [

  [{

    x: 10,

    y: 20

  }, {

    x: 50,

    y: 100

  }],

  [{

    x: 25,

    y: 40

  }]

];


function draw(data) {

  const scatterGroup = svg.selectAll(".scatterGroup").data(data);


  scatterGroup.exit().remove();


  const scatterGroupNew = scatterGroup

    .enter()

    .append("g")

    .attr("class", "scatterGroup")

    .attr("fill", (d, i) => color[i])

    .attr("stroke", (d, i) => color[i]);


  // Equivalent:

  //const scatterPoints = svg.selectAll(".scatterGroup")

  //  .selectAll(".scatterPoint")

  //  .data((d) => d);


  const scatterPoints = scatterGroup

    .merge(scatterGroupNew)

    .selectAll(".scatterPoint")

    .data((d) => d);


  scatterPoints.exit().remove();


  const scatterPointsNew = scatterPoints

    .enter()

    .append("circle")

    .attr("class", "scatterPoint")

    .attr("r", 5);


  scatterPoints.merge(scatterPointsNew)

    .attr("cx", (d, i) => d.x)

    .attr("cy", (d, i) => d.y);

}


draw(data);

setTimeout(() => draw(newData), 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>


<svg>

</svg>


查看完整回答
反對 回復(fù) 2022-12-29
  • 1 回答
  • 0 關(guān)注
  • 104 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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