chart = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, height]); const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style('font-family', 'Helvetica') .style('background', 'white') .style('opacity', .9) .style('border-radius', '.1rem') .style('border', '0px solid black') .style('color', 'black') .style('display', 'block') .style('font-size', '14px') .style('max-width', '320px') .style('padding', '.2rem .4rem') .style('position', 'absolute'); svg.append('g').call(xAxis); svg.selectAll('.line-visites') .data(x.ticks()) .join('line') .attr('class', 'line-visites') .attr('x1', d => x(d)) .attr('x2', d => x(d)) .attr('y1', 10) .attr('y2', height - margin.top +35) .attr('stroke-width', .6) .attr('stroke', 'lightgray'); svg.selectAll('.label-edat') .data(edat) .join('text') .attr('class', 'label-edat') .attr('x', 0) .attr('y', d => y(d)) .style('font-family', 'Helvetica') .style('font-size', '12px') .attr('text-align', 'right') .attr('alignment-baseline', 'right') .text(d => d); svg.append("text") .attr("x", (width)-463) .attr("y", (margin.top)-85) .attr("text-anchor", "middle") .style("font-size", "16px") .attr("font-family", "Helvetica") .attr("font-weight", "bold") .text("Any 2019") .attr("opacity", 0.6); const simulation = d3.forceSimulation(data) .force('x', d3.forceX((d) => x(d.pacients)).strength(0.3)) .force('y', d3.forceY((d) => y(d.grups_edat)).strength(0.3)) .force('collide', d3.forceCollide(d => size(d.visites)/1.5 + padding).strength(1)) .stop(); for(let i = 0; i < 300; i++) { simulation.tick(); } simulation.stop(); svg.selectAll('circle') .data(data) .join('circle') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', d => size(d.visites)/1.5) .attr('fill', d => color2(d.sexe)) .attr('opacity', .8); svg.selectAll("circle") .on("mouseover", function(d) { d3.select(this) .attr('stroke-width', '1') .attr("stroke", "black") tooltip .style("visibility", "visible") .html(`Franja d'edat: ${d.grups_edat}
Sexe: ${d.sexe}
Centre: ${d.centre}
Pacients: ${d.pacients}
Visites: ${(d.visites)}`) }) .on("mousemove", function() { tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px") }) .on("mouseout", function() { d3.select(this).attr('stroke-width', '0'); tooltip.style("visibility", "hidden"); }); return svg.node(); }