D3.js-使用三角函式進行行追加的明顯錯誤-有解無憂

我正在設定手動將刻度線附加到我正在處理的弧形視覺效果上。剩下的就是每隔 30 度在圖表的外邊緣放置一個軸刻度線。我已經附加了 0 度標記（這很容易，實際上不涉及數學）然后我意識到我可能需要使用Math.sin()并Math.cosin()計算其他刻度的正確 x,y 坐標，因為它們是成角度的。我的 30 度刻度作業正常。因此，將 0 刻度和 30 刻度都正確附加到正確的大小和位置，人們會認為數學和代碼都很好。然而，神秘的是，60 度刻度線已經很遠了。請注意，它在圖表的內部，而不是它應該在的位置，在頂部和 30 度刻度之間的 60 度標記處。就好像它認為我給它一個完全不同的adjacent（使用三角術語）。下面的代碼：

顯示代碼片段

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

var height = 600;
var width = 600;

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 = [
{'fmc':'xx','funds':30,'top':35,'bottom':-30},
{'fmc':'xx','funds':44,'top':5,'bottom':-40},
{'fmc':'xx','funds':2,'top':20,'bottom':-10},
{'fmc':'xx','funds':22,'top':10,'bottom':-25},
{'fmc':'xx','funds':35,'top':4,'bottom':-20},

  ];

var yScale = d3.scaleLinear()
.range([height,0])
.domain([-50,50]);

var realScale = d3.scaleLinear()
.range([0,height/2])
.domain([0,50]);

var dScale = d3.scaleLinear()
.domain([-50,50])
.range([Math.PI,0]);

let arc = d3.arc()
  .innerRadius(0)
  .outerRadius(function(d) {return realScale(d.funds)})
  .startAngle(function(d) {return dScale(d.top)})
  .endAngle(function(d) {return dScale(d.bottom)});

graphGroup.append('g')
.call(d3.axisRight(yScale).ticks(5))
    .selectAll('text')
    .attr('text-anchor','end')
    .attr('transform','translate(-15,0)');

graphGroup.append('line')
  .attr('x1', 0)
  .attr('x2',width/2)
  .attr('y1', yScale(0))
  .attr('y2', yScale(0))
  .style('stroke','#000')
  .style('stroke-width',2)
  .style('stroke-dasharray','2,2');


  var arcAxis = d3.arc()
  .innerRadius(0)
  .outerRadius(width/2)
  .startAngle(0)
  .endAngle(Math.PI);

  var grid1 = d3.arc()
  .innerRadius(0)
  .outerRadius(realScale(20))
  .startAngle(0)
  .endAngle(Math.PI);

  var grid2 = d3.arc()
  .innerRadius(0)
  .outerRadius(realScale(40))
  .startAngle(0)
  .endAngle(Math.PI);



  graphGroup.append("path")
  .attr("d", grid1)
  .style('fill','none')
  .style('stroke','#a6a6a6')
  .style('stroke-width','1px')
  .style('stroke-dasharray','2,2')
  .attr("transform", "translate(0,300)");

  graphGroup.append("path")
  .attr("d", grid2)
  .style('fill','none')
  .style('stroke','#a6a6a6')
  .style('stroke-width','1px')
  .style('stroke-dasharray','2,2')
  .attr("transform", "translate(0,300)");

  graphGroup.append("path")
      .attr("d", arcAxis)
      .style('fill','none')
      .style('stroke','#000')
      .style('stroke-width','1px')
      .attr("transform", "translate(0,300)");

graphGroup.append('line')
.attr('x1',width/2)
.attr('x2',(width/2) 6)
.attr('y1',width/2)
.attr('y2',width/2)
.style('stroke','#000')
.style('stroke-width','1px');

graphGroup.append('line')
    .attr('y1', Math.sin((Math.PI / 180)*30)*300)
    .attr('y2', Math.sin((Math.PI / 180)*30)*294)
    .attr('x1', Math.cos((Math.PI / 180)*30)*300)
    .attr('x2', Math.cos((Math.PI / 180)*30)*306)
    .style('stroke','#000')
    .style('stroke-width','1px');

    graphGroup.append('line')
        .attr('y1', Math.sin((Math.PI / 180)*60)*300)
        .attr('y2', Math.sin((Math.PI / 180)*60)*294)
        .attr('x1', Math.cos((Math.PI / 180)*60)*300)
        .attr('x2', Math.cos((Math.PI / 180)*60)*306)
        .style('stroke','#000')
        .style('stroke-width','1px');


  graphGroup
.selectAll()
.data(data)
.enter()
.append("path")
    .attr('transform','translate(0,300)')
    .attr("class", "arc")
    .attr("d", arc)
    .style('fill', "#003366")
    .style('opacity',.3);

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

問題

對我來說這看起來像一個錯誤，如果我們只執行幾行代碼，我們可以看到正確呈現的結果，那么為什么將 30 更改為 60 會導致完全不同的結果呢？

uj5u.com熱心網友回復：

這是一個解決方案：

const addMark = (g, angle, fromRadius, toRadius) => {
    const angleR = angle * Math.PI / 180;
    const x1 = fromRadius * Math.sin(angleR);
    const y1 = fromRadius * -Math.cos(angleR);
    const x2 = toRadius * Math.sin(angleR);
    const y2 = toRadius * -Math.cos(angleR);
    console.log(x1, x2, y1, y2)
    g.append('line')
      .attr('y1', y1)
      .attr('y2', y2)
      .attr('x1', x1)
      .attr('x2', x2)
      .attr('transform', 'translate(0, 300)')
      .style('stroke','red');
}

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

var height = 600;
var width = 600;

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 = [
{'fmc':'xx','funds':30,'top':35,'bottom':-30},
{'fmc':'xx','funds':44,'top':5,'bottom':-40},
{'fmc':'xx','funds':2,'top':20,'bottom':-10},
{'fmc':'xx','funds':22,'top':10,'bottom':-25},
{'fmc':'xx','funds':35,'top':4,'bottom':-20},

  ];

var yScale = d3.scaleLinear()
.range([height,0])
.domain([-50,50]);

var realScale = d3.scaleLinear()
.range([0,height/2])
.domain([0,50]);

var dScale = d3.scaleLinear()
.domain([-50,50])
.range([Math.PI,0]);

let arc = d3.arc()
  .innerRadius(0)
  .outerRadius(function(d) {return realScale(d.funds)})
  .startAngle(function(d) {return dScale(d.top)})
  .endAngle(function(d) {return dScale(d.bottom)});

graphGroup.append('g')
.call(d3.axisRight(yScale).ticks(5))
    .selectAll('text')
    .attr('text-anchor','end')
    .attr('transform','translate(-15,0)');

graphGroup.append('line')
  .attr('x1', 0)
  .attr('x2',width/2)
  .attr('y1', yScale(0))
  .attr('y2', yScale(0))
  .style('stroke','#000')
  .style('stroke-width',2)
  .style('stroke-dasharray','2,2');


  var arcAxis = d3.arc()
  .innerRadius(0)
  .outerRadius(width/2)
  .startAngle(0)
  .endAngle(Math.PI);

  var grid1 = d3.arc()
  .innerRadius(0)
  .outerRadius(realScale(20))
  .startAngle(0)
  .endAngle(Math.PI);

  var grid2 = d3.arc()
  .innerRadius(0)
  .outerRadius(realScale(40))
  .startAngle(0)
  .endAngle(Math.PI);



  graphGroup.append("path")
  .attr("d", grid1)
  .style('fill','none')
  .style('stroke','#a6a6a6')
  .style('stroke-width','1px')
  .style('stroke-dasharray','2,2')
  .attr("transform", "translate(0,300)");

  graphGroup.append("path")
  .attr("d", grid2)
  .style('fill','none')
  .style('stroke','#a6a6a6')
  .style('stroke-width','1px')
  .style('stroke-dasharray','2,2')
  .attr("transform", "translate(0,300)");

  graphGroup.append("path")
      .attr("d", arcAxis)
      .style('fill','none')
      .style('stroke','#000')
      .style('stroke-width','1px')
      .attr("transform", "translate(0,300)");

graphGroup.append('line')
.attr('x1',width/2)
.attr('x2',(width/2) 6)
.attr('y1',width/2)
.attr('y2',width/2)
.style('stroke','#000')
.style('stroke-width','1px');

const addMark = (g, angle, fromRadius, toRadius) => {
    const angleR = angle * Math.PI / 180;
  const x1 = fromRadius * Math.sin(angleR);
  const y1 = fromRadius * -Math.cos(angleR);
  const x2 = toRadius * Math.sin(angleR);
  const y2 = toRadius * -Math.cos(angleR);
  console.log(x1, x2, y1, y2)
  g.append('line')
    .attr('y1', y1)
    .attr('y2', y2)
    .attr('x1', x1)
    .attr('x2', x2)
    .attr('transform', 'translate(0, 300)')
    .style('stroke','red')
    .style('stroke-width', 2)
}


  graphGroup
.selectAll()
.data(data)
.enter()
.append("path")
    .attr('transform','translate(0,300)')
    .attr("class", "arc")
    .attr("d", arc)
    .style('fill', "#003366")
    .style('opacity',.3);
    
addMark(graphGroup, 15, 300, 306);        
addMark(graphGroup, 30, 300, 306);        
addMark(graphGroup, 45, 300, 306);      
addMark(graphGroup, 60, 300, 306);      
addMark(graphGroup, 75, 300, 306);      
addMark(graphGroup, 90, 300, 306);

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/527360.html

標籤：javascriptd3.js

上一篇：當d3.js中的資料更改時，條形圖刻度標簽不會更新

下一篇：如何使用帶有打字稿的d3v7.6.1在餅圖中包裝文本？