如何在 d3.js 中的折线图的 y 轴上的单词上显示第一个点的数据

【问题标题】：how to display data from 1st point on words on y axis for line chart in d3.js如何在 d3.js 中的折线图的 y 轴上的单词上显示第一个点的数据
【发布时间】：2018-03-13 08:43:25
【问题描述】：

如上图所示，折线图在 y 轴和数据之间有一些间隙。图表和日期应该从图表的交点开始。第一个日期应显示在交点处（从 0 开始在 y 轴上） 如何在 d3.js（v3 版本）中消除交点和第一个日期之间的差距。

我找不到合适的轴，请帮我摆脱这个.. 这是我的代码

index.html 

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
    background-color: #F1F3F3
}

.axis {
    font: 10px sans-serif;
}

.bar1 {

        font-size: 12px;
        color: black;
    }
.axis path,
.axis line {
    fill: none;
    stroke: black;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}


.line {
    fill: none;


    /* stroke-width: 2px;*/
}

.line1 {
    fill: none;
}

.overlay {
    fill: none;
    pointer-events: all;
}

.area1 {
    fill: steelblue;
}
.legend {
    border: 2px solid;
}
svg {
    border: 2px solid;
    margin-left: 90px;
    margin-top: 30px;
}
</style>

<body>
    <div id="lineChart"></div>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
    var data = [{
            "year": "01/01/2005 00:01",
            "value": 700,
            "value1": 1000
        },
        {
            "year": "01/02/2005 00:02",
            "value": 625,
            "value1": 1000
        },
        {
            "year": "01/03/2005 00:03",
            "value": 852,
            "value1": 1000
        },
        {
            "year": "01/04/2005 00:04",
            "value": 888,
            "value1": 1000
        },
        {
            "year": "01/05/2005 00:05",
            "value": 689,
            "value1": 1000
        },
        {
            "year": "01/06/2005 00:06",
            "value": 772,
            "value1": 1000
        },
        {
            "year": "01/07/2005 00:07",
            "value": 700,
            "value1": 1000
        },
        {
            "year": "01/08/2005 00:08",
            "value": 776,
            "value1": 1000
        },
        {
            "year": "01/09/2005 00:09",
            "value": 650,
            "value1": 1000
        },
        {
            "year": "01/10/2005 00:10",
            "value": 779,
            "value1": 1000
        },
        {
            "year": "01/11/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/12/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/13/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/13/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/14/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/15/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/16/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/17/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/18/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/19/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/20/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/21/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/22/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/23/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/24/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/25/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/26/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/27/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/28/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/29/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/30/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/31/2005 00:11",
            "value": 600,
            "value1": 1000
        }
    ];
    var margin = { top: 20, right: 20, bottom: 100, left: 30 },
        width = 600 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var color_hash = [{
            "text": " Maximum Value",
            "color": "steelblue"
        },
        {
            "text": "Consumed Value",
            "color": "yellow"
        },
    ];

    var x = d3.scale.ordinal().rangeRoundBands([0, 550]);
    var y = d3.scale.linear().range([height, 0]);



    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(function(d) {
            return d3.time.format('%m/%d/%Y')(new Date(d));
        });;


    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var svg = d3.select("#lineChart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom + 80)
        .append("g")
        .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");


    var line = d3.svg.line()
        .interpolate("cardinal")
        .x(function(d) { return x(d.year); })
        .y(function(d) { return y(d.value); });

    var line1 = d3.svg.line()
        .interpolate("cardinal")
        .x(function(d) { return x(d.year); })
        .y(function(d) { return y(d.value1); });



    var area = d3.svg.area()
        .interpolate("cardinal")
        .x(function(d) { return x(d.year); })
        .y0(height)
        .y1(function(d) { return y(d.value); });

    var area1 = d3.svg.area()
        .interpolate("cardinal")
        .x(function(d) { return x(d.year); })
        .y0(height)
        .y1(function(d) { return y(d.value1); });


    var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



    data.forEach(function(d) {
        d.year = d.year;
        d.value = +d.value;
        d.value1 = +d.value1;
    });

    x.domain(data.map(function(d) { return d.year; }));
    y.domain([0, d3.max(data, function(d) { return d.value, d.value1 + 100; })]);

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.9em")
        .attr("dy", "-.6em")
        .attr("transform", "rotate(-90)")
    svg.append("text")
        .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top + 80) + ")")
        .style("text-anchor", "middle")
        .text("Year");;

    g.append("g")
        .attr("class", "axis axis--y")
        .call(yAxis)
    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", margin.left - 70)
        .attr("x", 0 - (height / 2) - 20)
        .attr("dy", "2em")
        .style("text-anchor", "middle")
        .text("Values");

    g.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line)
        .attr("stroke", "red")
        .attr("stroke-width", "1");

    g.append("path")
        .datum(data)
        .attr("class", "line1")
        .attr("d", line1)
        .attr("stroke", "red")
        .attr("stroke-width", "1");

    g.append("path")
        .data([data])
        .attr("class", "area")
        .attr("d", area)
        .style("fill", "steelblue")
        .attr("opacity", 1);

    g.append("path")
        .data([data])
        .attr("class", "area1")
        .attr("d", area1)
        .style("fill", "steelblue")
        .attr("opacity", .5);

    svg.append("text")
        .attr("x", (width / 2) + 20)
        .attr("y", 20 - (margin.top / 2))
        .attr("text-anchor", "middle")
        .style("font-size", "16px")

        .text("Day Wise Power Consumption");


    var legend = d3.select('svg').append('g')
        .attr("class", "legend")

    legend.selectAll('g')
        .data(color_hash) //hard coding the labels as the datset may have or may not have but legend should be complete.
        .enter().append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; })
        .each(function(d, i) {
        var g = d3.select(this);
        g.append("rect")
            .attr("x", width - 300)
            .attr("y", 320)
            .attr("width", 18)
            .attr("height", 18)
            .attr("opacity", 0.7)
            .style("fill", function(d) { 
                return d.color 
            });

        // draw legend text
        g.append("text")
            .attr("x", width - 165)
            .attr("y", 327)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function(d) { 
                return d.text; 
            });
    });
   

    g.selectAll("dot")
        .data(data)
        .enter().append("circle")
        .attr("r", 3)
        .attr("fill", "black")
        .attr("cx", function(d) { return x(d.year); })
        .attr("cy", function(d) { return y(d.value); });

    g.selectAll("dot")
        .data(data)
        .enter().append("circle")
        .attr("r", 3)
        .attr("fill", "black")
        .attr("cx", function(d) { return x(d.year); })
        .attr("cy", function(d) { return y(d.value1); });
    </script>
</body>

</html>

【问题讨论】：

    标签： javascript d3.js


    【解决方案1】：

    我做了一些小的改动，但它们都围绕着 xscale 的创建方式。 d3 v3 有一个 d3.time.scale() 非常适合这类事情。所以我将你的 x 比例切换到那个，并将你的年份值解析为日期对象。我还在您的 xscale 域创建中添加了 .nice()，这有助于添加开始和结束滴答声。

    <!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
    background-color: #F1F3F3
}

.axis {
    font: 10px sans-serif;
}

.bar1 {

        font-size: 12px;
        color: black;
    }
.axis path,
.axis line {
    fill: none;
    stroke: black;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}


.line {
    fill: none;


    /* stroke-width: 2px;*/
}

.line1 {
    fill: none;
}

.overlay {
    fill: none;
    pointer-events: all;
}

.area1 {
    fill: steelblue;
}
.legend {
    border: 2px solid;
}
svg {
    border: 2px solid;
    margin-left: 90px;
    margin-top: 30px;
}
</style>

<body>
    <div id="lineChart"></div>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
    var data = [{
            "year": "01/01/2005 00:01",
            "value": 700,
            "value1": 1000
        },
        {
            "year": "01/02/2005 00:02",
            "value": 625,
            "value1": 1000
        },
        {
            "year": "01/03/2005 00:03",
            "value": 852,
            "value1": 1000
        },
        {
            "year": "01/04/2005 00:04",
            "value": 888,
            "value1": 1000
        },
        {
            "year": "01/05/2005 00:05",
            "value": 689,
            "value1": 1000
        },
        {
            "year": "01/06/2005 00:06",
            "value": 772,
            "value1": 1000
        },
        {
            "year": "01/07/2005 00:07",
            "value": 700,
            "value1": 1000
        },
        {
            "year": "01/08/2005 00:08",
            "value": 776,
            "value1": 1000
        },
        {
            "year": "01/09/2005 00:09",
            "value": 650,
            "value1": 1000
        },
        {
            "year": "01/10/2005 00:10",
            "value": 779,
            "value1": 1000
        },
        {
            "year": "01/11/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/12/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/13/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/13/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/14/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/15/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/16/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/17/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/18/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/19/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/20/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/21/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/22/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/23/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/24/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/25/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/26/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/27/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/28/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/29/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/30/2005 00:11",
            "value": 600,
            "value1": 1000
        },
        {
            "year": "01/31/2005 00:11",
            "value": 600,
            "value1": 1000
        }
    ];
    var margin = { top: 20, right: 20, bottom: 100, left: 30 },
        width = 600 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var color_hash = [{
            "text": " Maximum Value",
            "color": "steelblue"
        },
        {
            "text": "Consumed Value",
            "color": "yellow"
        },
    ];

    var x = d3.time.scale().range([0, 550]);
    var y = d3.scale.linear().range([height, 0]);



    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(function(d) {
            return d3.time.format('%m/%d/%Y')(new Date(d));
        });


    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var svg = d3.select("#lineChart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom + 80)
        .append("g")
        .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");


    var line = d3.svg.line()
        .interpolate("cardinal")
        .x(function(d) { return x(d.year); })
        .y(function(d) { return y(d.value); });

    var line1 = d3.svg.line()
        .interpolate("cardinal")
        .x(function(d) { return x(d.year); })
        .y(function(d) { return y(d.value1); });



    var area = d3.svg.area()
        .interpolate("cardinal")
        .x(function(d) { return x(d.year); })
        .y0(height)
        .y1(function(d) { return y(d.value); });

    var area1 = d3.svg.area()
        .interpolate("cardinal")
        .x(function(d) { return x(d.year); })
        .y0(height)
        .y1(function(d) { return y(d.value1); });


    var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var timeFormat = d3.time.format("%m/%d/%Y %H:%M")

    data.forEach(function(d) {
        d.year = timeFormat.parse(d.year);
        d.value = +d.value;
        d.value1 = +d.value1;
    });

    x.domain([d3.min(data, function(d){return +d.year}), d3.max(data, function(d){return +d.year})]).nice();
    y.domain([0, d3.max(data, function(d) { return d.value, d.value1 + 100; })]);

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.9em")
        .attr("dy", "-.6em")
        .attr("transform", "rotate(-90)")
    svg.append("text")
        .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top + 80) + ")")
        .style("text-anchor", "middle")
        .text("Year");;

    g.append("g")
        .attr("class", "axis axis--y")
        .call(yAxis)
    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", margin.left - 70)
        .attr("x", 0 - (height / 2) - 20)
        .attr("dy", "2em")
        .style("text-anchor", "middle")
        .text("Values");

    g.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line)
        .attr("stroke", "red")
        .attr("stroke-width", "1");

    g.append("path")
        .datum(data)
        .attr("class", "line1")
        .attr("d", line1)
        .attr("stroke", "red")
        .attr("stroke-width", "1");

    g.append("path")
        .data([data])
        .attr("class", "area")
        .attr("d", area)
        .style("fill", "steelblue")
        .attr("opacity", 1);

    g.append("path")
        .data([data])
        .attr("class", "area1")
        .attr("d", area1)
        .style("fill", "steelblue")
        .attr("opacity", .5);

    svg.append("text")
        .attr("x", (width / 2) + 20)
        .attr("y", 20 - (margin.top / 2))
        .attr("text-anchor", "middle")
        .style("font-size", "16px")

        .text("Day Wise Power Consumption");


    var legend = d3.select('svg').append('g')
        .attr("class", "legend")

    legend.selectAll('g')
        .data(color_hash) //hard coding the labels as the datset may have or may not have but legend should be complete.
        .enter().append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; })
        .each(function(d, i) {
        var g = d3.select(this);
        g.append("rect")
            .attr("x", width - 300)
            .attr("y", 320)
            .attr("width", 18)
            .attr("height", 18)
            .attr("opacity", 0.7)
            .style("fill", function(d) { 
                return d.color 
            });

        // draw legend text
        g.append("text")
            .attr("x", width - 165)
            .attr("y", 327)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function(d) { 
                return d.text; 
            });
    });
   

    g.selectAll("dot")
        .data(data)
        .enter().append("circle")
        .attr("r", 3)
        .attr("fill", "black")
        .attr("cx", function(d) { return x(d.year); })
        .attr("cy", function(d) { return y(d.value); });

    g.selectAll("dot")
        .data(data)
        .enter().append("circle")
        .attr("r", 3)
        .attr("fill", "black")
        .attr("cx", function(d) { return x(d.year); })
        .attr("cy", function(d) { return y(d.value1); });
    </script>
</body>

</html>

    Here is a fiddle 和 nice 使用得更好一些。我将d3.time.days 传递给.nice()。最右边有一个勾号的原因是nice rounds the extents，最后一个数据点略高于日期标记。

    【讨论】：

    • 如果我再次提供 2 个月的数据，它的显示与上述图片相同。
    • @Chandrashekhar 并且您已经使用time.scale 设置了轴？只要您将.nice() 添加到扩展域定义的末尾，它就可以处理任何数量的数据。
    • 如何从x轴的交点显示日期（y轴如何从0开始）？
    • 将 .nice() 添加到 y 比例域也应该这样做。
    • 不工作先生，除了第 1 行它显示日期第 2 行以后...
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-06
    • 1970-01-01
    • 1970-01-01
    • 2021-12-13
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode