个人中心
gpt4 book ai didi

javascript - D3 格式问题

转载 作者：行者123 更新时间：2023-11-28 09:02:19 24 4
gpt4 key购买 nike

我在使用 d3 图形表示时遇到格式问题。X 轴以年为单位输入，我认为将其视为任何其他数字会更容易(而不是 dateFormat... %Y )输出会自动 (?) 添加逗号作为千位 - 我的假设。有没有办法让这个 4 dig int 保持原样？

(这是我第一次涉足 HTML、CSS、JS 和 d3——感谢您的同理心/评论)谢谢。

 <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    
    body { font: 12px Arial;}
    
    path { 
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }
    
    .axis path,
    .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }
    
    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    
    <script>
    
    var margin = {top: 30, right: 40, bottom: 30, left: 50},
        width = 600 - margin.left - margin.right,
        height = 270 - margin.top - margin.bottom;
    
    
    var  x = d3.scale.linear().range([0, width]);
    var y0 = d3.scale.linear().range([height, 0]);
    var y1 = d3.scale.linear().range([height, 0]);
    
    var xAxis = d3.svg.axis().scale(x)
        .orient("bottom").ticks(5);
    
    var yAxisLeft = d3.svg.axis().scale(y0)
        .orient("left").ticks(5);
    
    var yAxisRight = d3.svg.axis().scale(y1)
        .orient("right").ticks(5); 
    
    var valueline = d3.svg.line()
        .x(function(d) { return x(d.year); })
        .y(function(d) { return y0(d.freq); });
        
    var valueline2 = d3.svg.line()
        .x(function(d) { return x(d.year); })
        .y(function(d) { return y1(d.fn); });
      
    var svg = d3.select("body")
        .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
        .append("g")
            .attr("transform", 
                  "translate(" + margin.left + "," + margin.top + ")");
    
    // Get the data
    d3.csv("duallines2.csv", function(error, data) {
        data.forEach(function(d) {
            d.year = +(d.year);
            d.freq = +d.freq;
            d.fn = +d.fn;
        });
    
        // Scale the range of the data
        x.domain(d3.extent(data, function(d) { return d.year; }));
        y0.domain([0, d3.max(data, function(d) {
            return Math.max(d.freq); })]); 
        y1.domain([0, d3.max(data, function(d) { 
            return Math.max(d.fn); })]);
    
        svg.append("path")        // Add the valueline path.
            .attr("d", valueline(data));
    
        svg.append("path")        // Add the valueline2 path.
            .style("stroke", "red")
            .attr("d", valueline2(data));
    
        svg.append("g")            // Add the X Axis
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
    
        svg.append("g")
            .attr("class", "y axis")
            .style("fill", "steelblue")
            .call(yAxisLeft);   
    
        svg.append("g")             
            .attr("class", "y axis")    
            .attr("transform", "translate(" + width + " ,0)")   
            .style("fill", "red")       
            .call(yAxisRight);
    
    });
    
    </script>
    </body>

数据文件如下所示:

“双线2.csv”

年，频率，fn1950,58.13,3.411951,53.98,4.551952,67.00,6.781953,89.70,7.851954,99.00,8.921955,130.28,9.921956,166.70,10.131957,234.98,12.231958,345.44,13.451959,443.34,16.041960,543.70,18.031961,580.13,21.021962,605.23,22.341963,622.77,20.151964,626.20,21.261965,628.44,31.041966,636.23,35.041967,633.68,41.021968,624.31,43.051969,629.32,46.031970,618.63,51.031971,599.55,53.421973,609.86,57.821974,617.62,59.011975,614.48,56.031976,606.98,58.01

最佳答案

您可以定义自己的格式——在这种情况下，使每个xAxis 刻度标签都是一个整数——然后告诉xAxis使用那个格式:

var format = d3.format("d");
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(5)
    .tickFormat(format); // <----- tell the xAxis to use your custom formatter

这是您将获得的更新输出:

graph with proper x-axis labels

请参阅有关格式化数字的文档 here .

关于javascript - D3 格式问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26853528/

24 4 0
文章推荐： javascript - 将 HTML 名称属性转换为 Javascript 对象
文章推荐： javascript - window.onload 内的函数
文章推荐： ios - 如何将字典的内容转储到 UITextView 或 UILabel 中？
文章推荐： javascript - 如果您只有图像的链接，如何将图像绘制到 Canvas 上？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com