Javascript 将结果转换为d3中的百分比
我刚刚开始学习d3.js+带有图例和工具提示的折线图。我可以让它工作,但我想要的是yAxis结果是百分比格式。尝试使用tickFormat,但不知何故它无法将我的原始数字转换为百分比。T_ut 这是我的js代码Javascript 将结果转换为d3中的百分比,javascript,d3.js,Javascript,D3.js,我刚刚开始学习d3.js+带有图例和工具提示的折线图。我可以让它工作,但我想要的是yAxis结果是百分比格式。尝试使用tickFormat,但不知何故它无法将我的原始数字转换为百分比。T_ut 这是我的js代码 chart = d3LineWithLegend() .xAxis.label('Date') .width(700) .height(300) .yAxis.label('Frequency
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();
});
我上面的代码中出现了什么问题?如果我不能让它在客户端工作,我会考虑在服务器端进行调整。但是太多的工作。d3.format.0%无法进行缩放。它所做的只是简单地乘以100,然后在末尾加上一个%。我相信0%不会增加精度。如果您希望精度达到第十位,请使用.1%。不知道这是不是想要的
您可能需要使用d3.scale.linear来首先缩放数据,使其在0到1之间。然后您可以创建一个yscale,它使用0到1的域,对应于最终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)
希望这有帮助。d3.format.0%不会进行缩放。它所做的只是简单地乘以100,然后在末尾加上一个%。我相信0%不会增加精度。如果您希望精度达到第十位,请使用.1%。不知道这是不是想要的
您可能需要使用d3.scale.linear来首先缩放数据,使其在0到1之间。然后您可以创建一个yscale,它使用0到1的域,对应于最终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)
希望这有帮助。您没有在任何地方使用您定义的yAxis。您需要将其交给图形规范。d3LineWithLegend从何而来?您没有在任何地方使用您定义的yAxis。您需要将其交给图形规范。d3LineWithLegend从何而来?感谢您的解决方案!谢谢你的解决方案!