I am currently working on a 3D bar chart in D3.js, inspired by the code found here
I'm facing an issue where, when the bars are placed close together and the chart is rotated, the perspective/projection/view behaves strangely, causing some values to appear completely flat at certain angles. I understand that this is likely a perspective problem, but I'm keen on finding a solution.
Here is the code snippet I'm using:
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-3d/build/d3-3d.min.js"></script>
<body>
<svg width="960" height="500"></svg>
<style type="text/css">
button {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<button>update</button>
<script>
// JavaScript code here
</script>
</body>
Furthermore, I have encountered an issue while working with two images:
The first image clearly displays the bar and its value https://i.sstatic.net/lL4MZ.png
However, a slight rotation to achieve the second image seems to make it "disappear" (though it might just decrease in height significantly) https://i.sstatic.net/SDp5t.png
Does anyone have insights on what might be causing this?