D3.js中使用style方法设置width属性失效问题咨询

我一眼就发现问题所在啦！你通过style()设置width的时候只返回了数字，而CSS的width属性必须带单位（比如px或%），D3的style()方法不会自动为你补充单位，导致浏览器无法识别这个样式，所以宽度设置没生效——而其他像background-color、margin这类不需要额外单位或你已经明确写了单位的属性，自然就能正常工作。

修正方案 #

只需要在返回width值的时候加上对应的单位就行，分两种场景：

• 如果你想直接用年龄值作为像素宽度：

.style('width', (d) => { return parseInt(d.age) + 'px'; });

• 如果你想用之前定义的scale把年龄映射为百分比宽度（对应你text里显示的scale(parseInt(d.age))）：

.style('width', (d) => { return scale(parseInt(d.age)) + '%'; });

完整修正后的代码 #

function showData(clients){
 let max = d3.max(clients, (d) => { return (parseInt(d.age)); })
 //console.log(max);
 let scale = d3.scaleLinear().domain([0, parseInt(max)]).range([0, 100]);
 //console.log(scale);
 let join = container.selectAll('div').data(clients);
 join.enter().append('div')
 .text((d) => { return d.name + ' : ' + scale(parseInt(d.age)); })
 .style('background-color', 'blue')
 .style('margin', '5px')
 .style('color', 'white')
 .style('width', (d) => { return parseInt(d.age) + 'px'; }); // 补充px单位
}

这样修改后，浏览器就能正确识别width属性，柱子的宽度就会按照你预期的显示啦～

内容的提问来源于stack exchange，提问作者Sourav Kumar