D3.js从单独的文件中绘制多个数据集

Question

我正在尝试使用两个tsv文件中的两组数据制作散点图。但是，每个都与单个刻度共享x轴。有两个y轴，每个都有自己的比例。 我现在拥有的图表将在视觉上有所帮助。

问题是，第二个数据集（橙色）仅部分绘制，在a轴上显示为约15,000的污迹。它应该是一个更大的线。此外，当我运行它时，有时第二个数据集渲染，第一个数据集现在。不知道为什么会发生这种情况..

以下是两个（可能的）相关代码块：

    //1st data set
    d3.tsv("datatest4.tsv", function(error, tsv1) {

        tsv1.forEach(function(d) {
            d.altit = +d.altit;
            d.tmp = +d.tmp;

        });

        x.domain(d3.extent(tsv1, function(d) { return d.altit; })).nice();
        y.domain(d3.extent(tsv1, function(d) { return d.tmp; })).nice();

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
            .attr("class", "label")
            .attr("x", width)
            .attr("y", -6)
            .style("text-anchor", "end")
            .text("Altitude (m)");

        svg.append("g")
            .attr("class", "y axis axis1")
            .call(yAxis)
            .append("text")
            .attr("class", "label")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end");

        svg.selectAll(".dot")
            .data(tsv1)
            .enter().append("circle")
            .attr("class", "dot")
            .attr("r", 1)
            .attr("cx", function(d) { return x(d.altit); })
            .attr("cy", function(d) { return y(d.tmp); })
            .style("fill","steelblue");

    });

和

    //2nd data set
    d3.tsv("datatest2.tsv", function(error, tsv2) {

        tsv2.forEach(function(dd) {
            dd.alti = +dd.alti;
            dd.pressure = +dd.pressure;
        });

        x2.domain(d3.extent(tsv2, function(dd) { return dd.alti; })).nice();
        y2.domain(d3.extent(tsv2, function(dd) { return dd.pressure; })).nice();

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis2)
            .attr("x", width)
            .attr("y", -6)
            .text("Altitude (m)");

        svg.append("g")
            .attr("class", "y axis axis2")
            .call(yAxis2)
            .append("text")
            .attr("class", "label")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end");

        svg.selectAll(".dot")
            .data(tsv2)
            .enter().append("circle")
            .attr("class", "dot")
            .attr("r", 1)
            .attr("cx", function(dd) { return x2(dd.alti); })
            .attr("cy", function(dd) { return y2(dd.pressure); })
            .style("fill","orange");    

    });

Answer 1

问题是，您为每个数据集svg.selectAll(".dot")和.data(tsv1)使用了相同的选择器.data(tsv2)。

D3认为第二套应该取代第一套。您可以通过为每种类型的点分配唯一的类来修复它。

    svg.selectAll(".blue.dot")// Select specifically blue dots
        .data(tsv1)
        .enter().append("circle")
        .attr("class", "blue dot")// Assign two classes
        ...

    svg.selectAll(".orange.dot")
        .data(tsv2)
        .enter().append("circle")
        .attr("class", "orange dot")
        ...