如何在d3js中旋轉立方體的角度？

誰能提供任何參考，如何在d3js中制作一個精確的圖表

如何將SVG旋轉到相反的角度。請參考圖片以了解更多細節。結果應該是像這個圖片給出的那樣。 如果有人對此有一些建議的材料，那么這將是非常有幫助的。 我在這里給出的代碼只顯示了一個單列，而且是反方向的

。

<style>
    * {
        margin: 30;
        padding: 30;
        border: 0;
    }

    body {
        background: white;
    }

    .forward {
        fill: #ee5252;
    }

    .top {
        fill: #b43c3c;
    }

    .side {
        fill: #b23b3b;
    }
</style>
<script src="https://d3js. org/d3.v3.js"></script>
<svg> 

</svg>/span>

<script>。
    var svg = d3.select('svg') 。

    var rect3d = svg.append('g')
        .attr('height', 50)
        .attr('width', 20)
        .attr("transform", "translate (15,15)")
        ;

    var rh = 130, rw = 20, ang = 45;

    rect3d.append("rect"/span>)
        .attr("class"/span>, "forward")
        .attr("x"/span>, 0)
        .attr("y", 0)
        .attr("width", rw)
        .attr("height", rh)
        ;

    rect3d.append("rect")
        .attr("class"/span>, "top")
        .attr("x"/span>, 0)
        .attr("y", 0)
        .attr("width", rw)
        .attr("height", rh /2)
        . attr("transform", "translate ("   (-rh / 2)   " 。 "   (-rh / 2)   ") skewX("   45   ") )
        ;

  rect3d.append("rect")
    .attr("class"/span>, "side")
   .attr("x", 0)
  .attr("y", 0)
  .attr("width", rh/2)
  .attr("height", rh)
  . attr ("transform", "translate (" (-rh/2) " 。 " (-rh/2) ") skewY(" ang ") ")
  ;



</script> 

uj5u.com熱心網友回復：

這里有一個帶有深度效果的X/Y軸的解決方案：

const add3DBar = (parent, xPos, yPos, width, height, depth, duration) => {
  const g = parent.append('g') 。 attr('transform', `translate(${xPos}, ${yPos})`) 。
  
  g.append('path')
   . attr('d', `M 0, 0 V ${0} H ${width} V 0 H 0 Z`)
   .style('fill'/span>, '#000081')
   .transition()
   .duration(duration)
   . attr('d', `M 0, 0 V ${高度} H ${寬度} V 0 H 0 Z`）。)
  
  g.append('path')
   . attr('d', `M 0, ${0} L ${depth}。 ${深度} H ${深度 寬度} L ${寬度}, 0 Z`)
   .style('fill', '#0000FF')
   .transition()
   .duration(duration)
   . attr('d', `M 0,${高度} L${深度}, ${高度-深度} H ${深度 寬度} L ${帶寬},${高度} Z`)。

  g.append('path')
   . attr('d', `M ${width}。 0 L ${width   depth},${-depth}, V ${-depth} L ${width}, 0 Z`)
   .style('fill', '#0000C0')
   .transition()
   .duration(duration)
   . attr('d', `M ${width}, 0 L ${width   depth}, ${深度}, V ${高度-深度} L ${寬度},${高度} Z`）。)
}

const addXAxis = (parent, xPos, yPos, width, depth) => {
    const scale = d3.scaleBand()
    .domain(['A'/span>, 'B'/span>, 'C'/span>] )
    .range([0, width] )
  const axis = d3.axisBottom()
    .scale(scale)
  const g = parent.append('g') 。
  g.call(axis)
    .attr('transform', `translate(${xPos},${yPos})`)
  const path = `M 0, 0 H ${width} L${width   depth} ${depth} H ${depth} L 0, 0 Z`。
  g.append('path')
    .attr('d', path)
    .style('stroke', 'none')
    .style('fill', '#ccc')
};

const addYAxis = (parent, xPos, yPos, height, depth) => {
    const scale = d3.scaleLinear()
    .domain([0, 0.3] )
    .range([0, -height] )
  const axis = d3.axisLeft()
    .scale(scale)
    .ticks(4)
  const g = parent.append('g')。
  g.call(axis)
    .attr('transform', `translate(${xPos},${yPos})`)
  const path = `M 0, 0 V ${高度} L${深度} ${高度-深度} V ${深度} L 0, 0 Z`。
  g.append('path'/span>)
    .attr('d', path)
    .style('stroke', 'none')
    .style('fill', '#ccc')
};


const svg = d3.select（'svg'）。

addXAxis(svg, 30, 150, 200, 10) 。
addYAxis(svg, 30, 150, 120, 10) 。

add3DBar(svg, 50, 150, 30, 100, 10, 500）。)
add3DBar(svg, 115, 150, 30, 70, 10, 1000）。)
add3DBar(svg, 180, 150, 30, 120, 10, 1500）。) 

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

< svg width="300" height="200"/>/span>

標籤：

上一篇：Autodeskforge高亮顯示子物件

下一篇：在python中從嵌套的dictory中創建分層的Json