Question

这是我的数据：

var lineData =[ 
     [  {
          x: "2014-12-29",
          y: 113.9
        }, {
          x: "2015-01-09",
          y: 112.1
        }, {
          x: "2015-01-21",
          y: 110.3
        }, {
          x: "2015-02-05",
          y: 112.8
        }, {
          x: "2015-02-19",
          y: 108.5
        }, {
          x: "2015-03-06",
          y: 111.3
        }
    ],
    [   {
          x: "2014-12-29",
          y: 118.2
        }, {
          x: "2015-01-13",
          y: 116
        }, {
          x: "2015-02-26",
          y: 114
        }
    ],
   [    {
          x: "2014-12-29",
          y: 123.6
        }, {
          x: "2015-01-10",
          y: 123.3
        }, {
          x: "2015-01-29",
          y: 122.1
        }, {
          x: "2015-02-12",
          y: 121.9
        }, {
          x: "2015-02-25",
          y: 122.3
        }, {
          x: "2015-03-06",
          y: 119.7
        }
    ]

];

我想让每个子数组成为折线图上不同行的数据。

这是一个点击事件，我想在我的图表中添加一行：

function twokClick(){
$('#2k').click( function(){
        if($(this).css("background-color") == "rgb(178, 178, 178)"){
            $(this).css("background-color", "#8E8E8E");
            addLine(0);

        }
        else {
            $(this).css("background-color", "rgb(178, 178, 178)");
            removeLine(0);
        }
    });
}

这是我第一次制作svg和axis的地方：

    function graph() {
    $('#progress').click( function(){ 
        var svg = d3.select("svg");
        var WIDTH = 1100;
        var HEIGHT = 350;
        var MARGINS = {
          top: 40,
          right: 20,
          bottom: 40,
          left: 80
        };
        xRange = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right])
            .domain([new Date(date.min), new Date(date.max)]);
        yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom])
            .domain([60, 140]);

        var xAxis = d3.svg.axis()
          .scale(xRange)
          .tickSize(5)
          .ticks(18)
          .tickFormat(d3.time.format('%e/%m'))
          .tickSubdivide(true);
        var yAxis = d3.svg.axis()
          .scale(yRange)
          .tickSize(5)
          .orient('left')
          .tickSubdivide(true);

        svg.append("g")
          .attr('class', 'x axis')
          .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) +     ')')
          .call(xAxis);

        svg.append("g")
          .attr('class', 'y axis')
          .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
          .call(yAxis);
        svg.append("g")
          .attr("class", "y axis")
          .append("text")
          .attr("class", "axis-label")
          .attr("transform", "rotate(-90)")
          .attr("y", 40)
          .attr("x", -HEIGHT/2-MARGINS.top-50)
          .text('Split (Seconds per 500m)');

    });
}

这是我无法工作的，我的addLine（）函数：

function addLine(i) {
    data = lineData[i];
    var line = d3.svg.line()
    .x(function(d) { return xRange(new Date(d.x)); })
    .y(function(d) { return yRange(d.y); });

    svg.select('.line')
    .data(data)
    .enter()
    .append("path")
    .data(data)
    .attr("id",  i + "line")
    .attr("class", "line")
    .attr('stroke', "#FFFFFF")
    .attr("d", line(data));
}

此功能不起作用，我的线条不显示。请帮忙。感谢

Answer 1

如果您发布完整代码的链接，则可以回答您的问题。这是我最好的猜测：

SVG'line'元素是单行，没有内部。这意味着该行不占用空间 - 所以我们实际上看不到任何东西。

要解决此问题，请务必提供以下内容： .attribute（“stroke-width”，NUMBER），其中NUMBER是该行的单位宽度。

所以在最好的情况下，你只需要添加一行代码：参见//＆lt; - A

function addLine(i) {
    data = lineData[i];
    var line = d3.svg.line()
    .x(function(d) { return xRange(new Date(d.x)); })
    .y(function(d) { return yRange(d.y); });

    svg.select('.line')
    .data(data)
    .enter()
    .append("path")
    .data(data)
    .attr("id",  i + "line")
    .attr("class", "line")
    .attr('stroke', "#FFFFFF")
    .attr('stroke-width', 2) // <-- A add this line
    .attr("d", line(data));
}

在d3.js中如何在不同的点击事件中添加和删除多行？

1 个答案: