¿Alguien podría ayudarme con el código a continuación? Quiero producir un gráfico de puntos con triángulos. Estoy usando el código a continuación, pero todos los triángulos están en (0,0)
svg.selectAll("dot") .data(data1) .enter() .append("path") .attr("d", sym) .attr("fill", "green") .attr("transform", "translate(50, 50)");}
Si usa una traducción estática como translate(50, 50) para todos los puntos, supongo que también se dibujarán en el mismo punto. Use algo como esto dependiendo de cómo se vean sus datos:
svg.selectAll() .data(data) .enter() .append("path") .attr("d", d3.symbol().type(d3.symbolTriangle)) .attr("transform", d => "translate(" + x(dx) + "," + y(dy) + ")");Actualmente no está configurando la posición de cada path en su código. Deberá traducir cada triángulo según el lugar donde desee que aparezca.
He adjuntado un ejemplo a continuación que coloca círculos usando scalePoint y scaleLinear , pero puede usar el que necesite para ajustarse a sus datos.
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(dx)}, ${y(dy)})`); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <body> <svg id="svg" /> </body>