时间戳

首页 > 解决方案 > 如何在d3js中旋转立方体的角度？

javascript - 如何在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>

<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")
        .attr("class", "forward")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", rw)
        .attr("height", rh)
        ;

    rect3d.append("rect")
        .attr("class", "top")
        .attr("x", 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", "side")
   .attr("x", 0)
  .attr("y", 0)
  .attr("width", rh/2)
  .attr("height", rh)
  .attr ("transform", "translate ("+(-rh/2)+","+(-rh/2)+") skewY("+ang+")")
  ;



</script>

标签： javascriptnode.jsd3.js

解决方案

这是具有深度效果的 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', '#000081')
   .transition()
   .duration(duration)
   .attr('d', `M 0,0 V ${-height} H ${width} V 0 H 0 Z`);
  
  g.append('path')
   .attr('d', `M 0,${0} L ${depth},${-depth} H ${depth + width} L ${width},0 Z`)
   .style('fill', '#0000FF')
   .transition()
   .duration(duration)
   .attr('d', `M 0,${-height} L ${depth},${-height-depth} H ${depth + width} L ${width},${-height} 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},${-depth}, V ${-height-depth} L ${width},${-height} Z`);
}

const addXAxis = (parent, xPos, yPos, width, depth) => {
    const scale = d3.scaleBand()
    .domain(['A', 'B', 'C'])
    .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 ${-height} L${depth} ${-height - depth} V ${-depth} L 0,0 Z`;
  g.append('path')
    .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>

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

推荐阅读