个人中心
gpt4 book ai didi

javascript - 多折线图显示问题

转载 作者：行者123 更新时间：2023-11-28 00:18:12 25 4
gpt4 key购买 nike

我正在尝试创建一个多线图表，有两条线和两种不同的颜色，我已按照 http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs 上的指南进行操作但就我而言，它不起作用，我想知道为什么。我的 tsv 文件是这个 http://wikisend.com/download/732088/difference.tsv]difference.tsv

代码

<html style="height: 100%">
<head>
    <title>Information Visualization</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="d3/d3.js"> </script>
    <script type="text/javascript" src="d3/d3.tip.js"> </script>
    <style type="text/css">
    .axis {
                    font: 9px sans-serif;

            }
            .axis path,
            .axis line {
                    fill: none;
                    stroke: #000;
                    shape-rendering: crispEdges;
            }

           /* .x.axis path {
                    display: none;
            }*/

            #MainVisualization{
                    float:left;
                    /*min-width:1024px;*/
                    width:50%;
                    margin-left:0.5%;
                    margin-right:0.5%;
                    margin-top:0.5%;
                    min-height:300px;
                    height:40%;
                    background-color: white;
            }
            #LineChart{
                    float:left;
                    /*min-width:1024px;*/
                    /*width:100%;*/
                    margin-left:0.5%;
                    margin-right:0.5%;
                    margin-top:0.5%;
                    /*min-height:768px;*/
                    height:48%;
                    background-color: yellow;
            }

            #Command-Area{
                    width:100%;
                    height:2%;
                    background-color: green;
                    opacity:0.7;
            }
            #Title{
                    margin: 0;
                    margin-bottom: 0.5%;
                    text-align: center;
                    font-family: sans-serif;
                    font-size: 250%;
                    color: goldenrod;
            }
            .line{
                fill:none;
                stroke: steelblue;
                stroke-width:1.5px;
            }
            #tooltip {
                position: fixed;
                width: 100px;
                height: auto;
                padding: 10px;
                background-color: orange;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                pointer-events: none;
            }

            #tooltip.hidden {
                 display: none;
            }

            #tooltip p {
                margin: 0;
                font-family: sans-serif;
                font-size: 16px;
                line-height: 20px;
            }
            .d3-tip {
                line-height: 1;
                font-weight: bold;
                padding: 12px;
                background: rgba(0, 0, 0, 0.8);
                color: #fff;
                border-radius: 2px;
            }

            .d3-tip:after {
                box-sizing: border-box;
                display: inline;
                font-size: 10px;
                width: 100%;
                line-height: 1;
                color: rgba(0, 0, 0, 0.8);
                content: "\25BC";
                position: absolute;
                text-align: center;
            }

            .d3-tip.n:after {
                margin: -1px 0 0 0;
                top: 100%;
                left: 0;
            }

</style>
</head>
<body style="height:100%"> 
    <h1 id="Title" >Difference between  2003 to 2010</h1>
    <div id="Command-Area"></div>
    <div id="tooltip" class="hidden">    
    <div id="MainVisualization">

    </div>
    <div id="LineChart">

    </div>


    <script type="text/javascript">

        var containerWidth,containerHeight;

        containerWidth=document.getElementById("MainVisualization").offsetWidth;
        containerHeight=document.getElementById("MainVisualization").offsetHeight;

        console.log("------ "+containerWidth+ " "+containerHeight);

        var margin = {top: 20, right: 20, bottom: 30, left: 40};
        width = containerWidth - margin.left - margin.right,
        height = containerHeight - margin.top - margin.bottom;

        var padding = 20;
        var dataset;


        var parseDate = d3.time.format("%Y").parse;
        var xScale = d3.time.scale().range([0,width]);
        var yScale = d3.scale.linear().range([height,0]);
        var xAxis = d3.svg.axis()
                      .scale(xScale)
                      .orient("bottom");
        var yAxis = d3.svg.axis().scale(yScale).orient("left");


        var line = d3.svg.line().interpolate("linear")
                     .x(function(d){
                            return xScale(d.anno);
                    })
                     .y(function(d){
                         return yScale(+d.value);
                    })


        var tip2 = d3.tip()
                    .attr('class', 'd3-tip')
                    .offset([ -10, 0 ]).html(
                        function(d) {
                            return "<strong>% People:</strong> <span style='color:red'>" + d.Totale + "</span>";
                    })   

        /******* multi line chart ********/    
        containerWidth=document.getElementById("MainVisualization").offsetWidth;
        containerHeight=document.getElementById("MainVisualization").offsetHeight;



        var color = d3.scale.ordinal()
                      .range(["#9c8305","#d3c47c"]);

        d3.tsv("resources/difference.tsv",function(data){

            var labelVar = 'anno';
            var varNames = d3.keys(data[0])
                             .filter(function(key){ return key !== labelVar;});
            color.domain(varNames);

            var seriesData = varNames.map(function(name){
                return{
                    name: name,
                    values: data.map(function(d){
                        return {name: name, anno: d[labelVar], value: +d[name]};
                    })
                };
            });
            console.log("serieData",seriesData);


            var margin = {top: 20, right: 20, bottom: 30, left: 40};
            width = containerWidth - margin.left - margin.right,
            height = containerHeight - margin.top - margin.bottom;

            var parseDate = d3.time.format("%Y").parse;
            var xScale = d3.time.scale().range([0,width]);
            var yScale = d3.scale.linear().range([height,0]);
            var xAxis = d3.svg.axis()
                          .scale(xScale)
                          .orient("bottom");
            var yAxis = d3.svg.axis().scale(yScale).orient("left");


            var line = d3.svg.line().interpolate("linear")
                         .x(function(d){
                            return xScale(d.anno);
                        })
                         .y(function(d){
                             return yScale(d.value);
                        })

            var svg = d3.select("#LineChart")
                        .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 + ")");

          //  svg.call(tip2);

            svg.append("svg:text")
               .text("Men's internet usage from 2003 to 2013")
               .attr("x","40%")
               .attr("y","6%")
               .attr("font-size","100%")
               .attr("dx","-25%")
               .attr("fill","red");

            data.forEach(function(d) {
                d.anno = parseDate(d.anno.toString());     
            });

           yAxis.tickFormat(function(d){return d + "%"});


            yScale.domain([
                    d3.min(seriesData, function(c) {
                        return d3.min(c.values, function(v) { return v.value; });
                    }),
                    d3.max(seriesData, function(c) {
                        return d3.max(c.values, function(v) { return v.value; });
                    })
            ]);


            xScale.domain(d3.extent(data,function(d){
                return +d.anno;
            }));



           svg.append("g")
               .attr("class","x axis")
               .attr("transform","translate(0," + height +")")
               .call(xAxis);

            svg.append("g")
               .attr("class","y axis")
               .call(yAxis)
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", ".71em")
               .style("text-anchor", "end")
               .text("Frequency");

    var series = svg.selectAll(".series").data(seriesData)
                    .enter().append("g").attr("class","series");

            series.append("path")
               .attr("class","line")
               .attr("d",function(d){ return line(d.values); })
               .style("stroke","black")
               .style("stroke-width", "4px")
               .style("fill", "none");
             //  .transition().duration(2500).attrTween("d",pathTween);

         /*function pathTween() {
                var interpolate = d3.scale.quantile()
                                    .domain([0,1])
                                    .range(d3.range(1, data.length + 1));
                return function(t) {
                    return line(data.slice(0, interpolate(t)));
                };
            }*/

     /*       svg.selectAll("circle")
               .data(datiInternet)
               .enter()
               .append("circle")
               .attr("cx",function(d){
                   return xScale(d.anno);
                })
               .attr("cy",function(d){
                   return yScale(d.value);
                })
               .attr("r",5)
               .on('mouseover', tip2.show).on('mouseout', tip2.hide);           
   */

        });


    </script>


</body>

我看到的只是两个轴，我不知道出了什么问题。也许错误在于检索行(d.values)，控制台 d.values 给了我一个数组，对于数组的每个元素，我需要“值”元素。请帮助我，我被封锁在这里，提前致谢!

最佳答案

您的代码似乎有很多错误。 (如果你查看 DOM，所有折线图都被放在工具提示 div 下。)这是我认为你正在寻找的工作准系统版本。

http://bl.ocks.org/JoshFerge/5e7622d010271fb4082f

关于javascript - 多折线图显示问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30270938/

25 4 0
文章推荐： javascript - 如何在开始时禁用 HTML 中的链接并在之后启用它？
文章推荐： Javascript根据类点击删除子项
文章推荐： c++ - 重载 C++ 运算符 >> 这样我就可以读取一个 vector (vector vector;)
文章推荐： 没有生成器的 JavaScript 数组递归
行者123
个人简介

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

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