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

我只开始学习d3.js +线条图与传说&工具提示。而且我能够使其工作，但我想要的是将yAxis结果以百分比格式。尝试使用tickFormat，但不知何故，它不会将我的原始数字转换为百分比。 T__T将结果转换为d3中的百分比

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

似乎什么在我上面的代码中的问题？如果我不在客户端工作，我正考虑在服务器端进行调整。但太多的工作。

来源

2013-05-03 Wondering Coder

您不使用您在任何地方定义的'yAxis'。你需要把它给图形规范。 'd3LineWithLegend（）'来自哪里？ – 2013-05-03 09:06:23

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)

希望这会有所帮助。

来源

2013-05-03 16:41:55 chrtan

感谢您的解决方案！ – 2017-03-28 15:21:30

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

回答

相关问题