Javascript d3标签重叠
我已经创建了一个d3饼图。一切正常，但我的标签重叠。我曾尝试使用CSS修复它，但它不起作用。 下面是HTML代码Javascript d3标签重叠,javascript,d3.js,Javascript,D3.js,我已经创建了一个d3饼图。一切正常，但我的标签重叠。我曾尝试使用CSS修复它，但它不起作用。 下面是HTML代码 <div class="custom-chart"></div> 看起来像这样 var details = [{ "name": "GRAND DING HOUSE Hong Kong HK", "label": "72" }, { "name": "MI-NE SUSHI HONG KONG HK", "label": "10" }, { "name"
<div class="custom-chart"></div>
var details = [{ "name": "GRAND DING HOUSE Hong Kong HK", "label": "72" }, { "name": "MI-NE SUSHI HONG KONG HK", "label": "10" }, { "name": "TNS INVESTMENT LIMITED", "label": "6" }, { "name": "GRAND DING HOUSE Hong Kong HK", "label": "2" }, { "name": "MI-NE SUSHI HONG KONG HK", "label": "1" }, { "name": "Other", "label": "9" }];
chartScript(details, '.custom-chart');
function chartScript(details, clsName) {
var lblName = new Array(6); var i = 0;
for (var index in details) {
lblName[i] = details[index];
i++;
}
var width = 350, height = 350;
let colors = d3.scaleOrdinal().domain(lblName).range(['#A4A4A4', '#0073AA', '#009DD9', '#005D87', '#00A76D', '#6DC067']);
let svg = d3.select(clsName).append('svg').attr('width', width).attr('height', height);
let data = d3.pie().sort(null).value(function (d) {return d.label;})(details);
let segments = d3.arc().innerRadius(55).outerRadius(120).padAngle(0.05).padRadius(30);
let sections = svg.append('g').attr('transform', 'translate(175,145)').selectAll('path').data(data);
sections.enter().append('path').attr('d', segments).attr('fill', function (d, i) {return colors(i);});
let content = d3
.select(clsName)
.select('g')
.selectAll('text')
.data(data);
content
.enter()
.append('text')
.classed('inside', true)
.each(function (d) {
let center = segments.centroid(d);
d3.select(this)
.attr('x', center[0] - 10)
.attr('y', center[1])
.text(d.data.label + '%');
});
let legends = svg.append('g').attr('transform', 'translate(30, 270)').selectAll('.legends').data(data);
let legend = legends.enter().append('g').classed('legends', true).attr('transform', function (d, i) {
if (i < 3) {return 'translate(0,' + (i + 1) * 20 + ')';}
else { return 'translate(170,' + (i - 3 + 1) * 20 + ')'; }
});
legend.append('rect').attr('width', 10).attr('height', 10).attr('fill', function (d, i) {return colors(i);})
.attr('x', -20)
.attr('y', 0);
legend.append('text').classed('label', true).text(function (d) {return d.data.name;}).attr('fill', function (d, i) {return colors(i); }).attr('x', 15).attr('y', 10);
}
您需要对d3代码进行几处更改，以克服重叠 1） 增加SVG的宽度 2） 将饼图转换为SVG的中心 3） 同时向右平移图例组 请查找附件中的更新代码
VaR详情= [ {姓名〉：“大鼎香港香港”，“标签”：“72”}，“Mi-Ne寿司香港香港”，“标签”：“10”}，{“TNS投资有限公司”，“标签”：“6”}，{“姓名”：“大丁家香港香港”，“标签”：“2”}，{“姓名”：“Mi-Ne寿司香港香港”，“标签”：“1”}，{“名称”：“其他”，“标签”：“9”}；
图表脚本（详细信息，“.custom chart”）；
函数图表脚本（详细信息，clsName）{
var lblName=新数组（6）；var i=0；
对于（详细的var指数）{
lblName[i]=详细信息[索引]；
i++；
}
宽度=650；
变量宽度=矩形宽度，高度=350；
设colors=d3.scaleOrdinal（）.domain（lblName）.range（['A4A4A4'、'0073AA'、'009DD9'、'005D87'、'00A76D'、'6DC067']）；
让svg=d3.select（clsName）.append（'svg'）.attr（'width'，width）.attr（'height'，height）；
让data=d3.pie（）.sort（null）.value（函数（d）{return d.label；}）（详细信息）；
设线段=d3.arc（）.内半径（55）.外半径（120）.焊盘角度（0.05）.焊盘半径（30）；
让sections=svg.append（'g'）.attr（'transform'，'translate（'+rectWidth/2+'，'145'））.selectAll（'path'）.data（data）；
sections.enter（）.append（'path'）.attr（'d'，segments）.attr（'fill'，function（d，i）{返回颜色（i）；}）；
让内容=d3
.选择（clsName）
.选择（'g'）
.selectAll（'text'）
.数据（数据）；
内容
.输入（）
.append（'文本'）
.classed（'inside'，true）
.每个功能（d）{
设中心=段。质心（d）；
d3.选择（本）
.attr（'x'，中心[0]-10）
.attr（'y'，中间[1]）
.text（d.data.label+'%'）；
});
让legends=svg.append（'g'）.attr（'transform'，'translate（30270））.selectAll（'.legends'）.data（数据）；
legend=legends.enter（）.append（'g'）.classed（'legends'，true）.attr（'transform'，function（d，i）{
如果（i<3）{return'translate（0），+（i+1）*20+'）；}
else{return'translate（'+rectWidth/2+'，'+（i-3+1）*20+'）；}
});
图例.append（'rect'）.attr（'width'，10）.attr（'height'，10）.attr（'fill'，function（d，i）{返回颜色（i）；}）
.attr（'x'，-20）
.attr（'y'，0）；
legend.append（'text'）.classed（'label'，true）.text（函数（d）{return d.data.name；}）
.attr（'fill'，函数（d，i）{返回颜色（i）；}）.attr（'x'，15）.attr（'y'，10）；
}