如何根據D3中的角度計算（x，y）位置

Question

這個想法是，當我控制三角形時，藍色圓圈也應該旋轉。

const data = { 
    '0x001': {x: 10000, y: 10000, a: 20 }, 
    '0x002': {x: 15000, y: 10000, a: 180 }, 
    '0x003': {x: 5000, y: 1000, a: 120 }, 
    '0x004': {x: 18000, y: 9000, a: 230 } 
} 

const domains = { 
    x: [20000, 0], 
    y: [0, 20000] 
} 

const scales = { 
    x: d3.scaleLinear().range([505, 0]).domain(domain.x); 
    y: d3.scaleLinear().range([0, 620]).domain(domain.y); 
} 

var g = d3.select(el).selectAll('.d3-points'); 

// Create triangle object 
const triangle = d3.symbol().type(d3.symbolTriangle).size(400); 
var point = g.selectAll('.d3-point') 
    .data(data, d => d.id + d.x + d.y + d.a) 
    .enter().append("path") 
    .attr("transform", (d) => `translate(${scales.x(d.x)}, ${scales.y(d.y)}) rotate(${d.a})`) 
    .attr('class', 'd3-point').attr("d", triangle); 

// Create circle object 
g.selectAll('.d3-status') 
    .data(data, d => d.id + d.x + d.y + d.a) 
    .enter().append("circle") 
    .attr("cx", d => { 
    const x = scales.x(d.x) 
    // return ((x * Math.cos(d.a)) + 23.459) // TRIED 
    return x 
    }) 
    .attr("cy", d => { 
    const y = scales.y(d.y) 
    // return (y * Math.sin(d.a)) + (50/2) // TRIED 
    return y 
    }) 
    .attr("r", 3) 

Answer 1

您可以創建一個<g>元素環繞point（三角符號），然後追加圈到<g>元素而不是g，那樣你的圈子將與一起旋轉三角形。