D3.js从单独的文件绘制多个数据集 [英] D3.js Plotting Multiple Data Sets from Separate Files

问题描述

我试图用来自两个tsv文件的两组数据制作散点图。然而，每一个都与单个尺度共享x轴。有两个y轴，每个都有自己的刻度。 我现在的图表将有助于直观。

I'm trying to make a scatter plot with two sets of data from two tsv files. However, each one shares the x-axis with single scale. There are two y-axis each with their own scale. The graph I have right now will help visually.

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

Problem is, the 2nd data set (in orange) only plots partially as seen as a smudge at about 15,000 on the a-axis. it should really be a much larger line. Also, when I run this, sometimes the 2nd data set renders and the first does now. Not sure why this is happening..

以下是两个相关的代码块：

Here are the two (likely) relevant blocks of code:

    //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");    

    });

推荐答案

问题是你使用相同的选择器， svg.selectAll（。dot），对于每个数据集 .data（tsv1）和 .data（tsv2）。

The problem is that you're using the same selector, svg.selectAll(".dot"), for each dataset .data(tsv1) and .data(tsv2).

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

D3 thinks that the 2nd set is supposed to replace the first. You can fix it by assigning a unique class to each type of dot.

    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")
        ...

这篇关于D3.js从单独的文件绘制多个数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！