Question

0

335

Views

How to rotate the angle of the cube in d3js?

Can anyone give any reference how to make an exact chart in d3js

How to rotate the SVG to the opposite angle. please refer to the image for more details. the result should be like this image given. If anyone has some suggested material for this then that will be really helpful. The Code that I have given here only shows a single column and it's in opposite dirrection

<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>

over 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-01T15:12:53.442Z

Here is a solution for X/Y axis with depth effect:

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"/>

0

335

How to rotate the angle of the cube in d3js?

1 answers

0

Find remote jobs

Andres GPT