Estoy tratando de construir un gráfico de anillos con bordes redondeados solo en un lado. Mi problema es que tengo los dos lados redondeados y no solo de un lado. Tampoco puedo entender cómo hacer más arcos de primer plano, no solo uno.
const tau = 2 * Math.PI; // http://tauday.com/tau-manifesto const arc = d3.arc() .innerRadius(80) .outerRadius(100) .startAngle(0) .cornerRadius(15); const svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");Arco de fondo, pero no estoy seguro de si esto es necesario.
const background = g.append("path") .datum({endAngle: tau}) .style("fill", "#ddd") .attr("d", arc); const data = [ .51]; const c = d3.scaleThreshold() .domain([.200,.205,.300,.310, .501, 1]) .range(["green","#ddd", "orange","#ddd", "red"]); Const pie = d3.pie() .sort(null) .value(function(d) { return d; });Solo tenga un primer plano, pero debe poder tener varios:
const foreground = g.selectAll('.arc') .data(pie(data)) .enter() .append("path") .attr("class", "arc") .datum({endAngle: 3.8}) .style("fill", function(d) { return c(d.value); }) .attr("d", arc)¿Qué estoy haciendo mal?
var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto // An arc function with all values bound except the endAngle. So, to compute an // SVG path string for a given angle, we pass an object with an endAngle // property to the `arc` function, and it will return the corresponding string. var arc = d3.arc() .innerRadius(80) .outerRadius(100) .startAngle(0) .cornerRadius(15); // Get the SVG container, and apply a transform such that the origin is the // center of the canvas. This way, we don't need to position arcs individually. var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // Add the background arc, from 0 to 100% (tau). var background = g.append("path") .datum({endAngle: tau}) .style("fill", "#ddd") .attr("d", arc); var data = [ .51]; var c = d3.scaleThreshold() .domain([.200,.205,.300,.310, .501, 1]) .range(["green","#ddd", "orange","#ddd", "red"]); var pie = d3.pie() .sort(null) .value(function(d) { return d; }); // Add the foreground arc in orange, currently showing 12.7%. var foreground = g.selectAll('.arc') .data(pie(data)) .enter() .append("path") .attr("class", "arc") .datum({endAngle: 3.8}) .style("fill", function(d) { return c(d.value); }) .attr("d", arc) <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg width="960" height="500"></svg>La documentación establece que el radio de la esquina se aplica a ambos extremos del arco. Además, desea que los arcos se superpongan, lo que tampoco es el caso.
Puede agregar las esquinas redondeadas de un lado de la siguiente manera:
arc sin radio de esquina para los datos.corner de los objetos de path adicionales solo para la esquina redondeada. Estos necesitan ser desplazados al final de cada arc .corner tiene esquinas redondeadas en ambos lados, agregue un clipPath que recorte la mitad de este arco. El clipPath contiene una path para cada corner . Esto es esencial para arcos más pequeños que dos veces la longitud de las esquinas redondeadas.raise todos los elementos de la corner al frente y luego sort descendiendo por índice, para que se superpongan de la manera correcta. const arc = d3.arc() .innerRadius(50) .outerRadius(70); const arc_corner = d3.arc() .innerRadius(50) .outerRadius(70) .cornerRadius(10); const svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); const clipPath = g.append("clipPath") .attr("id", "clip_corners"); const c = d3.scaleQuantile() .range(["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"]); const pie = d3.pie().value(d => d); function render(values) { c.domain(values); const arcs = pie(values); const corners = pie(values).map(d => { d.startAngle = d.endAngle - 0.2; d.endAngle = d.endAngle + 0.2; return d; }); const clip = pie(values).map(d => { d.startAngle = d.endAngle - 0.01; d.endAngle = d.endAngle + 0.2; return d; }); g.selectAll(".arc") .data(arcs) .join("path") .attr("class", "arc") .style("fill", d => c(d.value)) .attr("d", arc); clipPath.selectAll("path") .data(clip) .join("path") .attr("d", arc); g.selectAll(".corner") .data(corners) .join("path") .raise() .attr("class", "corner") .attr("clip-path", "url(#clip_corner)") .style("fill", d => c(d.value)) .attr("d", arc_corner) .sort((a, b) => b.index - a.index); } function randomData() { const num = Math.ceil(8 * Math.random()) + 2; const values = Array(num).fill(0).map(d => Math.random()); render(values); } d3.select("#random_data") .on("click", randomData); randomData(); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"></script> <button id="random_data"> Random data </button> <svg width="150" height="150"></svg>Cambié la dependencia a la versión actual de d3.