使用“路径”

Question

我正在构建一个带有几个d3可视化的仪表板，如下所示：

我构建它的方法是在页面上创建几个div，并在这些div中调用.js脚本。到目前为止，这完全正常。不幸的是，在我的页面右上方div上使用折线图调用我的.js文件时遇到了问题。当我调用graph.js文件时，会发生这种情况：

我不完全确定发生了什么，但我认为可视化都使用“路径”元素，因此它们互相干扰。这是欧洲地图的主要代码：

//Load in GeoJSON data
        d3.json("ne_50m_admin_0_countries_simplified.json", function(json) {
            //Bind data and create one path per GeoJSON feature
            svg.selectAll("path")
                .data(json.features)
                .enter()
                .filter(function(d) { return d.properties.continent == 'Europe'}) //we only want Europe to be shown ánd loaded.
                .append("path")
                .attr("class", "border")
                .attr("d", path)
                .attr("stroke", "black")
                .attr("fill", "#ADD8E6")
                .attr("countryName", function(d){return d.properties.sovereignt})
                .on("mouseover", function(d) {  
                    div.transition()        
                        .duration(200)      
                        .style("opacity", .9);      
                    div .html(d.properties.sovereignt + ', ' + getCountryTempByYear(dataset, d.properties.sovereignt, document.getElementById("selectYear").value)) 
                        .style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY - 28) + "px");
                })                  
                .on("mouseout", function(d) {
                    div.transition()        
                        .duration(500)      
                        .style("opacity", 0);
                })  
                .on("click", function(d){
                    //add/delete country to/from selected countries
                    updateSelectedCountries(d.properties.sovereignt);

                    //draw the temperature visualizations again
                    redrawTemp(getCountryTempByYear(dataset, selectedCountries[0], document.getElementById("selectYear").value), getCountryTempByYear(dataset, selectedCountries[1], document.getElementById("selectYear").value));

                    //update header from the webpage
                    d3.select("#header").text("Climate Change: 1840-2013. Currently viewing: " + selectedCountries + ", " + document.getElementById("selectYear").value + '.');
                    console.log(selectedCountries);
                });
        });

这是折线图的代码：

// set the dimensions and margins of the grap
var array = [[1850, 11.1], [1851, 11.7], [1852, 12.2], [1853, 11.1], [1854, 11.7], [1855, 12.2], [1856, 13.4]]
var array2 = [[1850, 14.1], [1851, 17.7], [1852, 22.2], [1853, 13.1], [1854, 24.7], [1855, 19.2], [1856, 13.4]]


// set the ranges
var x = d3.scaleLinear().range([0, 200]);
var y = d3.scaleLinear().range([200, 0]);

    // define the line
var valueline = d3.line()
    .x(function(d, i) { return x(array[i][0]); })
    .y(function(d, i) { return y(array[i][1]); })
    .curve(d3.curveMonotoneX); //smooth line

var valueline2 = d3.line()
    .x(function(d, i) { return x(array2[i][0]); })
    .y(function(d, i) { return y(array2[i][1]); })
    .curve(d3.curveMonotoneX); //smooth line

var svg = d3.select("#div2")
    .append("svg")
    .attr("width", 200)
    .attr("height", 200)
    .attr("id", "graph");

x.domain([1850, 1856]);
y.domain([10, 25]);

array.forEach(function(data, i){
    svg.append("path")
      .data([array])
      .attr("class", "line")
      .attr("d", valueline);
})   

array2.forEach(function(data, i){
    svg.append("path")
        .data([array2])
        .attr("class", "line")
        .attr("d", valueline2);
})

// Add the X Axis
svg.append("g")
  .attr("transform", "translate(0," + 200 + ")")
  .call(d3.axisBottom(x));

// Add the Y Axis
svg.append("g")
  .call(d3.axisLeft(y));

正如我所说，我不完全确定这是因为图表都使用“path”元素，它也可能是不同的东西。现在我想知道的是：什么在干扰彼此？我该如何防止这种情况？

我可以想象需要应用类似过滤器的东西，但我不确定如何将其应用于正确的“路径”元素。

非常感谢任何帮助！

Answer 1

创建新图表时，应创建一个与其关联的新变量。

在您的情况下，由于重用变量var svg =...，可能会发生这种情况。

为每个图表创建一个变量就足够了。