javascript - 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

问题是您对每个数据集 .data(tsv1) 和 使用相同的选择器 svg.selectAll(".dot") >.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")
        ...