Question

我正在制作折线图，而且我遇到了一个相当微不足道的问题。我使用的是d3js V4，具体代码如下：

$(scope.container).append($('<svg id="svgimg" width="640" height="350" style="margin-left:auto;margin-right:auto;"></svg>'));
        var mainGroup = d3.select("#svgimg").append("g");
        d3.select("#svgimg").call(d3.zoom().on("zoom",function(){
            mainGroup.attr("transform","translate(" + d3.event.transform.x+","+d3.event.transform.y+") scale ("+d3.event.transform.k+")" );
        }));


        var parseTime = d3.timeParse("%d-%y");
        var svg = $("#svgimg"),
        margin = {top:20,right:20,bottom:20,left:20},
        width = +Number(svg.attr("width")) - margin.left -margin.right,
        height = +Number(svg.attr("height")) - margin.top-margin.bottom,
        g = mainGroup.append("g").attr("transform","translate("+margin.left+","+margin.top+")");
        //console.log(width);
        //console.log(height);
        var n = 2000;
        //  random = d3.randomNormal(0,.2),
        //  data = d3.range(n).map(random);

        var x =d3.scaleTime()
            .domain([new Date(2017,10,1),new Date(2017,10,31)])
            .range([0,width]);
        var y = d3.scaleLinear()
            .domain([0,2000])
            .range([height,0]);
        var line = d3.line()
            .x(function(d,i){return x(parseTime(d.date));})
            .y(function(d,i){return y(Number(+d.distance));});

        g.append("defs").append("clipPath")
            .attr("id","clip")
            .append("rect")
            .attr("width",width)
            .attr("height",height)
        g.append("g")
            .attr("class","axis axis--x")
            .attr("transform","translate(0,"+y(0)+")")
            .call(d3.axisBottom(x))
        g.append("g")
            .attr("class","axis axis--y")
            .call(d3.axisLeft(y))
        g.append("g")
            //.attr("clip-path","url(#clip)")
            .append("path")
            .datum(scope.data)
            .attr("d",line)
            .attr("class","linea");
        svg.innerHTML = svg.innerHTML;

其中范围是具有许多组件的对象（this）。

具体而言，边线和底部比例尺时，线图的线条不可见。此外，在检查时，路径元素具有一些相关数据，如果只能看到它，则可以开始调试。

任何信息都将非常感谢

编辑：scope.data对象包含一个包含时间，日期，距离和戳记字段的对象数组。图表＆＃34; d＆＃34;属性显示-25000的X范围 - ＆gt; 25000，Y值为155.我应该看到从左侧到右侧的水平线，但这不会发生。此外，我相信解析时间是罪魁祸首。时间值已暂时修改为等于UTC日期时间字符串。

编辑：时间是UTC日期时间字符串，类似于： 2017年9月19日星期二09:33:42 GMT + 1000（AEST）行数相差+ - 10分钟

我目前正在使用以下代码： var parseTime = d3.timeParse（d3.timeFormat.utc）;

来自浏览器的解析json的完整数组

results
:
[{time: "Tue Sep 19 2017 09:33:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"},…] 
0
:
{time: "Tue Sep 19 2017 09:33:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
1
:
{time: "Tue Sep 19 2017 09:23:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
2
:
{time: "Tue Sep 19 2017 09:13:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
3
:
{time: "Tue Sep 19 2017 09:03:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
4
:
{time: "Tue Sep 19 2017 08:53:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
5
:
{time: "Tue Sep 19 2017 08:43:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
6
:
{time: "Tue Sep 19 2017 08:33:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
7
:
{time: "Tue Sep 19 2017 08:23:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
8
:
{time: "Tue Sep 19 2017 08:13:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}

我为没有早先发布而道歉，我觉得这是无关紧要的，因为没有任何编辑方式使路径元素进入视野。

Answer 1

@Gerado Furtado 感谢您的耐心等待，您可能在没有意识到的情况下回答了这个问题。答案是确保＆＃34; scope.data[].time＆＃34;属性用＆＃34; new Date(scope.data[].time)＆＃34;解析解决方案已经奏效。再次感谢Patrick，

d3js折线图未显示

1 个答案: