Мобильная версияЯ пытаюсь создать закругленную горизонтальную диаграмму, но в коде есть проблема: прямой край полосы искажается при неправильном радиусе границы, когда он приближается к 100%. Я также заметил, что он ломается и при низких значениях 1% и 4%.
Как стабилизировать код, чтобы часть гистограммы была обрезана, но не нарушала контейнер
мультибар d3 d3.select("тело") .selectAll('svg') .удалять(); var data = [{"label": "Toblerone", "value": 97}]; вар ш = parseInt(280, 10), ч = parseInt(120, 10); var color = d3.scaleOrdinal().range(['#046395', '#d62828', '#f77f00', '#fcbf49', '#eae2b7']); data.forEach(функция(d) { d.total = +d.value; }); var Margin = {сверху: 20, справа: 10, снизу: 20, слева: 20}; var width = w - поля.слева - поля.права; вар высота = ч - маржа.верх - маржа.дно; вар х = d3.scaleLinear() .range([0, ширина]); вар у = d3.scaleBand() .range([высота, 0]) .padding(0,1); x.domain([0, 100]) y.domain(data.map(function(d) { return d.total; })); var svg = d3.select("тело") .append("SVG") .style('фон','#5902f6') .attr("ширина", ширина + поле.лево + поле.право) .attr("высота", высота + поле.верх + поле.дно) .append("г") .attr('класс', 'столбчатая диаграмма') .attr("transform", "translate(" + поля.left + "," + поля.top + ")"); вар граница = 4; var bar = svg.append('g').attr('class', 'bars'); bars.selectAll(".bg") .data(данные) .enter().append("прямой") .attr("класс", "фон") .attr('rx',()=>{ const barHeight = y.bandwidth(); возврат барВысота/2 }) .attr('ry',()=>{ const barHeight = y.bandwidth(); возврат барВысота/2 }) .attr('заполнить','#5902f6') .attr('обводка','белый') .attr('ширина штриха',граница-1) .attr("ширина",x(100)) .attr("y", function(d) { return y(d.value); }) .attr("высота", y.bandwidth()); ; bar.selectAll(".bar") .data(данные) .входить() .append("путь") .attr("класс", "бар") .attr("заполнить", "#2cc2d3") .attr('обводка','белый') .attr('ширина штриха',3.2) .attr("d", function(d) { const barWidth = x(d.total); const barHeight = y.bandwidth(); const leftCornerRadius = barHeight/2; пусть angularRadius = barHeight/2; if (d.total >= (100 - barHeight/5)) { angularRadius = (d.total - (100 - barHeight/5)) * 2,5; вернуть ` М ${leftCornerRadius} 0 H ${barWidth - angularRadius} A ${cornerRadius} ${cornerRadius} 0 0 1 ${barWidth} ${cornerRadius} V ${barHeight - angularRadius} A ${cornerRadius} ${cornerRadius} 0 0 1 ${barWidth - angularRadius} ${barHeight} Ч ${leftCornerRadius} A ${leftCornerRadius} ${leftCornerRadius} 0 0 1 0 ${barHeight - leftCornerRadius} В ${leftCornerRadius} A ${leftCornerRadius} ${leftCornerRadius} 0 0 1 ${leftCornerRadius} 0 З `; } еще { вернуть ` М ${cornerRadius} 0 Ч ${barWidth} В ${barHeight} Ч ${cornerRadius} A ${cornerRadius} ${cornerRadius} 0 0 1 0 ${barHeight - angularRadius} В ${cornerRadius} A ${cornerRadius} ${cornerRadius} 0 0 1 ${cornerRadius} 0 З `; } }) .attr("преобразование", function(d) { return `translate(0, ${y(d.value)})`; }); bar.selectAll(".label") .data(данные) .enter().append("текст") .attr("класс", "метка") .attr('текст-якорь', функция(d) { вернуть d.total
