dot chart showing triangle in d3 Java script-CodePudding

Could someone help me with the code below, I want to produce a dot chart with triangles, I am using the code below but all the triangles are on (0,0)

svg.selectAll("dot")
  .data(data1)
  .enter()
  .append("path")
  .attr("d", sym)
  .attr("fill", "green")
  .attr("transform", "translate(50, 50)");

}

enter image description here

CodePudding user response：

If you use a static translate like translate(50, 50) for all the points, I'd guess that they'll be drawn to the same point as well. Use something like this depending on how your data looks:

svg.selectAll()
  .data(data)
  .enter()
  .append("path")
  .attr("d", d3.symbol().type(d3.symbolTriangle))
  .attr("transform", d => "translate("   x(d.x)   ","   y(d.y)   ")");

CodePudding user response：

You're currently not setting the position of each path in your code. You'll need to translate each triangle based on where you want it to appear.

I've attached an example below which places circles using scalePoint and scaleLinear but you can use whichever you need to fit your data.

const data = [{
  x: 1,
  y: 1
}, {
  x: 2,
  y: 2
}, {
  x: 3,
  y: 3
}];

const height = 100;
const width = 100;

const TRI = "M 0,0 8,10 16,0 z";

const svg = d3.select("#svg").append("g");

const x = d3.scalePoint().domain([1, 2, 3]).range([0, width]);

const y = d3.scaleLinear().domain([1, 3]).range([height, 0]);

svg.append('g').call(d3.axisLeft(y));

svg
  .append('g')
  .attr('transform', `translate(0, ${height})`)
  .call(d3.axisBottom(x));

svg
  .selectAll()
  .data(data)
  .enter()
  .append("path")
  .attr("d", TRI)
  .attr("fill", "green")
  .attr("transform", (d) => `translate(${x(d.x)}, ${y(d.y)})`);

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

<body>
  <svg id="svg" />
</body>