D3 V3 多折线图 - 向 svg 添加线条的问题答案

【问题标题】：D3 V3 Multi-line Chart - Issues appending lines to svgD3 V3 多折线图 - 向 svg 添加线条的问题
【发布时间】：2017-11-23 19:36:41
【问题描述】：

我在让 D3v4 在图表上显示线条时遇到问题。我可能会混淆 v3/v4 语法。

我有嵌套的数据，因为有 5 行。

            // Chart Canvas Dimentions
            var margin = {top: 20, right: 80, bottom: 30, left: 50};
            var width = 900;
            var height = 600;

            // Time Parse
            var parseTime = d3.time.format("%Y-%m-%d %H:%M:%S");

            // Chart Axis Sizes
            yAxisMax = Math.max.apply(Math, data.map(function(o){return o.value;})) * 1.1;
            yAxisMin = Math.min.apply(Math, data.map(function(o){return o.value;})) - (this.yAxisMax * 0.1);
            xAxisMax = width * 0.99;

            console.log('yAxisMax: '+yAxisMax);
            console.log('yAxisMin: '+yAxisMin);
            console.log('xAxisMax: '+xAxisMax);



            var x = d3.time.scale()
                .range([0, width]);

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

            var color = d3.scale.category10();

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");

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



            chartLine = d3.svg.line()
                .x(function(d){ return x(parseTime(d.date)) })
                .y(function(d){ return y(d.value) })
                .interpolate("basis");




            // Nest Entries by Name (Groups the Lines by Names - Seperate Entities)
            var nestedData = d3.nest()
                .key(function(d) { return d.name; })
                .entries(data);

            // D3 Chart - This is the Context to Work With
            var context = d3.select("#chartContainer").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .attr("id", "D3lineChart")
                .attr("class", "D3EventScopeContainer")
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            // Interactive HoverLine
            var hoverLine = context
                .append('g')
                .attr('class', 'hoverLineGroup')
                .append("line")
                .attr('transform', 'translate(70,0)')
                .attr('class', 'interactiveHoverLine hidden')
                .attr("x1", 0).attr("x2", 0)
                .attr("y1", 0).attr("y2", height);



            // Loop through data
            nestedData.forEach(function(d,i) {
                console.dir(d)
                console.dir(d.values)


                // Add Line
                context
                    .append('g')
                    .attr('class', 'lineGroup')
                    .append('path')
                    .attr('transform', 'translate(70,0)')
                    .attr('class', 'chartLinesGroup tag'+ d.key.replace(/\s+/g, '').replace('.', '').replace('-', '').toLowerCase())
                    .style("stroke", function() { return d.color = color(d.key); })                   // Add the colours dynamically
                    .style("stroke-opacity", 1)
                    //.attr('d', chartLine(d.values))

                    .on("mouseover", function() {
                        d3.select(this)
                            .style("stroke-width", 7.5)
                    })
                    .on("mouseout", function() {
                        d3.select(this)
                            .style("stroke-width", 2.5)
                    });







            });

启用线路时失败

.attr('d', chartLine(d.values))

此函数的格式必须不正确才能使用数据。

我得到的错误是 - 与日期处理有关：

任何建议将不胜感激。我实际上是在尝试让线条显示在图表上。

谢谢

*** 我通过将 .parse 添加到时间格式行的末尾来绕过错误消息：

    // Time Parse
    var parseTime = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

屏幕上仍然没有显示 - div/svg 设置了高度/宽度...

嗯嗯

【问题讨论】：

标签： d3.js

【解决方案1】：

您需要阅读 API；）但首先您必须尝试：

var x = d3.scaleTime()
            .range([0, width]);

        var y = d3.scaleLinear()
            .range([height, 0]);

        var color = d3.scaleOrdinal(d3.schemeCategory10);

        var xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%H:%M:%S.%L"));

        var yAxis = d3.axisLeft(y);

parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S.%L");
chartLine = d3.line()
            .curve(d3.curveMonotoneX)
            .x(function(d){ return x(parseTime(d.date)) })
            .y(function(d){ return y(d.value) });

希望对你有所帮助

【讨论】：