gpt4 book ai didi

javascript - 将结果转换为 d3 中的百分比

转载 作者:行者123 更新时间:2023-11-30 07:16:17 27 4
gpt4 key购买 nike

我才刚刚开始学习 d3.js + 带有图例和工具提示的折线图。我能够让它工作,但我想要的是让 yAxis 结果采用百分比格式。尝试使用 tickFormat 但不知何故它不会将我的原始数字转换为百分比。啧啧啧

这是我的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();
});

我上面的代码似乎有什么问题?如果我不让它在客户端工作,我正在考虑在服务器端进行调整。但是工作量太大了。

最佳答案

d3.format(".0%") 不会缩放。它所做的只是简单地乘以 100 并在末尾添加一个 %。 (而且我相信 .0% 不会增加精度。如果你想要精确到十分之一的位置,请改用 .1%。不知道这是否需要)

您可能想使用 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)

希望这对您有所帮助。

关于javascript - 将结果转换为 d3 中的百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16351244/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com