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

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

d3.v4:如何使用 linkRadial 而不是 linkVertical

d3.v4:如何使用 linkRadial 而不是 linkVertical

陪伴而非守候 2023-05-25 18:21:39
建議的解決方案是使用此映射功能:var radialData = data.map(function(d) {? ? return {? ? ? ? source: {? ? ? ? ? ? x: 0,? ? ? ? ? ? y: 0? ? ? ? },? ? ? ? target: {? ? ? ? ? ? x: Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) - Math.PI,? ? ? ? ? ? y: Math.sqrt((d.target.x - d.source.x) * (d.target.x - d.source.x) + (d.target.y - d.source.y) * (d.target.y - d.source.y))? ? ? ? }? ? };});但是,所提供的解決方案似乎不適用于我的方法,因為 source.x 和 source.y 分配了 0。如何正確翻譯源對象和目標對象,或者我是否遺漏了什么?我的數(shù)據(jù)格式如下所示:[{? source: {? ? x: -2.9799212566117377,? ? y: -221.97999925512298? },? target: {? ? x: -57.966610375613655,? ? y: -94.66188293902567? },}, {? source: {? ? x: -20.132399189515613,? ? y: -221.08524713981706? },? target: {? ? x: -57.966610375613655,? ? y: -94.66188293902567? },}]另一種方法在:http://using-d3js.com/05_08_links.html 但是我不知道如何計算 xScale 和 yScale。非常感謝任何幫助!先感謝您!
查看完整描述

1 回答

?
ABOUTYOU

TA貢獻1812條經(jīng)驗 獲得超5個贊

邏輯是一樣的,只是使用 origin 而不是d.source. 現(xiàn)在,您知道了目標相對于原點的角度和半徑!然后,您可以使用完全相同的功能對源代碼執(zhí)行相同的操作。


const data = [{

  source: {

    x: -2.9799212566117377,

    y: -221.97999925512298

  },

  target: {

    x: -57.966610375613655,

    y: -94.66188293902567

  },

}, {

  source: {

    x: -20.132399189515613,

    y: -221.08524713981706

  },

  target: {

    x: -57.966610375613655,

    y: -94.66188293902567

  },

}];


d3.select("svg")

  .attr("width", 600)

  .attr("height", 600)

  .append("g")

  .attr("transform", "translate(300, 300)")

  .selectAll("path.horizontal")

  .data(data)

  .enter()

  .append("path")

  .attr("class", "horizontal")

  .attr("d", d3.linkHorizontal().x(d => d.x).y(d => d.y));


function toRadial(p) {

  const angle = Math.atan2(p.y, p.x) + Math.PI / 2;


  // The hypothenuse

  const radius = Math.sqrt(p.x ** 2 + p.y ** 2);


  return {

    angle: angle,

    radius: radius

  };

}

const radialData = data.map(d => ({

  source: toRadial(d.source),

  target: toRadial(d.target),

}));


d3.select("g")

  .selectAll("path.radial")

  .data(radialData)

  .enter()

  .append("path")

  .attr("class", "radial")

  .attr("d", d3.linkRadial().angle(d => d.angle).radius(d => d.radius));

path {

  fill: none;

  stroke-width: 2px;

}


.horizontal {

  stroke: blue;

}


.radial {

  stroke: red;

}

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

<svg></svg>


查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關注
  • 148 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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