Question

我正在使用与此类似的代码，并且实际插入此代码以查看我是否得到了相同的错误。这是代码：

<!DOCTYPE html>
    <meta charset="utf-8">
    <style>
        body { 
            font: 12px Arial;
        }
        path { 
            stroke: steelblue;
            stroke-width: 2;
            fill: none;
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: grey;
            stroke-width: 1;
            shape-rendering: crispEdges;
        }
        .legend {
            font-size: 16px;         
            font-weight: bold;         
            text-anchor: start;
        }
    </style>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>

    <script>
        var margin = {top: 30, right: 40, bottom: 70, left: 50}, 
        width = 600 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

        var parseDate = d3.time.format("%d-%b-%y").parse;

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

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

        var yAxisLeft = d3.svg.axis().scale(y0)
        .orient("left").ticks(5);

        var yAxisRight = d3.svg.axis().scale(y1)
        .orient("right").ticks(5);      

        var valueline = d3.svg.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y0(d.close); });    

        var valueline2 = d3.svg.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y1(d.open); });

        var svg = d3.select("body")

        .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 + ")");
        var data = [
            {"date":"9-Apr-12","close":436,"open":9.04},
            {"date":"7-Apr-12","close":221,"open":4.02},
            {"date":"5-Apr-12","close":113,"open":9.02},
            {"date":"4-Apr-12","close":64,"open":32.05},
            {"date":"3-Apr-12","close":29,"open":46.03},
            {"date":"2-Apr-12","close":18,"open":51.03}
        ];

        // Get the data
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            d.open = +d.open;
        });

        // Scale the range of the data
        x.domain(d3.extent(data, function(d) { return d.date; }));
        y0.domain([0, d3.max(data, function(d) { 
        return Math.max(d.close); })]);
        y1.domain([0, d3.max(data, function(d) { 
        return Math.max(d.open); })]);

        svg.append("path")
        .attr("class", "line")
        .attr("id", "blueLine")
        .attr("d", valueline(data));

        svg.append("path")
        .attr("class", "line")
        .style("stroke", "red")
        .attr("id", "redLine")
        .attr("d", valueline2(data));

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

        // edit the Y Axis Left
        svg.append("g") 
        .attr("class", "y axis")
        .style("fill", "steelblue")
        .attr("id", "blueAxis")
        .call(yAxisLeft);

        svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + width + " ,0)")
        .style("fill", "red")
        .attr("id", "redAxis")
        .call(yAxisRight);

        // Add the blue line title
        svg.append("text")
        .attr("x", 0)             
        .attr("y", height + margin.top + 10)    
        .attr("class", "legend")
        .style("fill", "steelblue")         
        .on("click", function(){
            // Determine if current line is visible
            var active   = blueLine.active ? false : true,
              newOpacity = active ? 0 : 1;
            // Hide or show the elements
            d3.select("#blueLine").style("opacity", newOpacity);
            d3.select("#blueAxis").style("opacity", newOpacity);
            // Update whether or not the elements are active
            blueLine.active = active;
        })
        .text("Blue Line");

        // Add the red line title
        svg.append("text")
        .attr("x", 0)             
        .attr("y", height + margin.top + 30)    
        .attr("class", "legend")
        .style("fill", "red")         
        .on("click", function(){
            // Determine if current line is visible
            var active   = redLine.active ? false : true ,
              newOpacity = active ? 0 : 1;
            // Hide or show the elements
            d3.select("#redLine").style("opacity", newOpacity);
            d3.select("#redAxis").style("opacity", newOpacity);
            // Update whether or not the elements are active
            redLine.active = active;
        })
        .text("Red Line");
    </script>
</body>

我收到的错误是说'blueline'和'redline'没有定义。

我在哪里定义？

我看过类似的代码，其中html，css和js被分成他们自己的文件，这也是我也是这样做的，除了我在上面的代码中看到的，我没有找到那些变量在任何其他地方使用或在那之外定义。

Answer 1

我用你在那里的代码制作了plunk，一切正常。让我解释一下发生了什么。

D3不会使用已经存在的HTML，而是经常生成自己的HTML（实际上它必须生成自己的可视化）。您会看到以下语句：

svg.append("path")
    .attr("class", "line")
    .attr("id", "blueLine")
    .attr("d", valueline(data));

D3刚刚创建了一个路径元素并将其附加到之前创建的svg元素。它为此特定元素提供了blueLine的id，稍后它将用于应用样式。在此脚本运行之前，它不存在于任何HTML中。 D3创造了它。

D3折线图显示/隐藏元素，变量未定义错误？

1 个答案: