javascript 将结果转换为 d3 中的百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16351244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert result to percentage in d3
提问by Wondering Coder
I'm only starting to learn d3.js + Line chart with Legend & Tooltips. And I'm able to make it work but what I want is to have the yAxis result to be in percentage format. Tried using tickFormat but somehow it doesn't convert my raw number to percentage. T__T
我才刚开始学习带有图例和工具提示的 d3.js + 折线图。我能够让它工作，但我想要的是让 yAxis 结果采用百分比格式。尝试使用 tickFormat 但不知何故它不会将我的原始数字转换为百分比。T__T
Here is my js code
这是我的js代码
chart = d3LineWithLegend()
.xAxis.label('Date')
.width(700)
.height(300)
.yAxis.label('Frequency');
var svg = d3.select('#histogram svg').datum(data);
svg.transition().duration(1000)
.attr('width', 700)
.attr('height', 300)
.call(chart);
chart.dispatch.on('showTooltip', function(e) {
var offset = $('#histogram').offset(), // { left: 0, top: 0 }
left = e.pos[0] + offset.left,
top = e.pos[1] + offset.top,
// formatter = d3.format(".04f");
formatter = d3.format(".0%");
var yAxis = d3.svg.axis().orient("left").tickFormat(formatter);//added this part but it didn't work
console.log(yAxis);
var dateObj = (new Date(e.point[0]));
var year = dateObj.getFullYear();
var month = dateObj.getMonth() + 1;
var day = dateObj.getDate();
var hours = dateObj.getHours();
var date = month + '-' + day + '-' + year;
if(filter === 'hour') {
date = date + ', ' + hours + ':00';
}
var content = '<h3>' + date + '</h3>' +
'<p>' +
'<span class="value">' + (e.point[1]) + '</span>' +
'</p>';
nvtooltip.show([left, top], content);
});
chart.dispatch.on('hideTooltip', function(e) {
nvtooltip.cleanup();
});
What seem to be the problem in my above code? If I don't make it work on the client side I'm thinking of adjusting this in server side. But too much work.
我上面的代码似乎有什么问题？如果我不让它在客户端工作，我正在考虑在服务器端调整它。但是工作太多了。
回答by chrtan
d3.format(".0%")won't do scaling. All it does is simply multiply by 100 and add a % to the end of it. (And I believe that .0% will add no precision. If you want precision to the tenth's place, use .1% instead. Don't know if this was wanted)
d3.format(".0%")不会做缩放。它所做的只是简单地乘以 100 并在其末尾添加一个 %。（而且我相信 .0% 不会增加精度。如果你想精确到十分之一，请改用 .1%。不知道这是不是想要的）
You might want to use d3.scale.linear() in order to scale your data first so that it is in the range of 0 to 1. And then you can create a yscale that uses domains from 0 to 1, which will correspond to 0% to 100% in the final y-axis.
您可能希望使用 d3.scale.linear() 首先缩放您的数据，使其在 0 到 1 的范围内。然后您可以创建一个使用 0 到 1 域的 yscale，这将对应于最终 y 轴上的 0% 到 100%。
//Run data through this pre-scaling.
prescale = d3.scale.linear()
.domain([dataMin, dataMax])
.range([0,1])
//Use this y-scale in place of another potential y-scaling function.
yScale = d3.scale.linear()
.domain([0, 1])
.range([canvasHeightLow, canvasHeightHigh]);
//Afterwards, you can use this yScale to build your yAxis
formatter = d3.format(".0%");
yAxis = d3.svg.axis().orient("left")
.scale(yScale)
.tickFormat(formatter)
Hope this helps.
希望这可以帮助。
