Javascript 如何使用d3在小型多重可视化上添加绘图

当前情况：我已经有了一个小型的数据多重可视化。它代表的是六天内的压力强度。它正确地绘制了图形。现在我想在现有的图表上加上点，如果这个人当时吸烟的话。我正在阅读一个csv文件，其中包括日期、时间、压力水平以及此人是否吸烟（如果吸烟，则为1；如果不吸烟，则为-1）。我使用的是D3V4

这是我目前得到的结果，但红点显然在错误的位置，因为它们显示了我甚至没有数据的地方。 我想要的是让红色的点出现在图表上，代表用户吸烟的时间

代码：

var margin={顶部：8，右侧：10，底部：2，左侧：10}，
宽度=1160-margin.left-margin.right，
高度=100-margin.top-margin.bottom；
var parseDate=d3.timeParse（“%H:%M:%S”）；
var x=d3.scaleTime（）
.范围（[0，宽度]）；
变量y=d3.scaleLinear（）
.范围（[高度，0]）；
var area=d3.area（）
.x（功能（d）{
返回x（d时间）；
})
.y0（高度）
.y1（功能（d）{
返回y（d.应力）；
});
var line=d3.line（）
.x（功能（d）{
返回x（d时间）；
})
.y（功能（d）{
返回y（d.应力）；
});
d3.csv（“6000smokedData3.csv”），类型，功能（错误，数据）{
//按日期嵌套数据。
var dates=d3.nest（）
.键（功能（d）{
返回日期；
})
.条目（数据）；
//计算y域所需的每个日期的最大应力。
日期。forEach（函数）{
s、 maxPrice=d3.max（s.值，函数（d）{
返回d.压力；
});
});
//计算跨越日期的最小和最大时间。
//我们假设值是按时间排序的。
x、 领域([
d3.最小值（日期、功能）{
返回s.values[0]。时间；
}),
d3.最大值（日期、功能）{
返回s.values[s.values.length-1]。时间；
})
]);
//为每个日期添加一个SVG元素，包含所需的尺寸和边距。
var svg=d3.选择（“主体”）.选择全部（“svg”）
.数据（日期）
.enter（）.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//添加散点图
svg.selectAll（“点”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“r”，4）
.样式（“填充”，功能（d）{
返回“红色”；
})
.attr（“cx”，功能（d）{
如果（d.吸烟==1）{
返回x（d时间）；
}
})
.attr（“cy”，函数（d）{
如果（d.吸烟==1）{
返回y（d.应力）；
}
});
//添加X轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
svg.append（“g”）
.调用（d3.左（y））；
//添加区域路径元素。注意：y域是按元素设置的。
追加（“路径”）
.attr（“类别”、“区域”）
.attr（“d”，函数（d）{
y、 域（[0，d.maxPrice]）；
返回区（d值）；
});
//添加行路径元素。注意：y域是按元素设置的。
追加（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{
y、 域（[0，d.maxPrice]）；
返回线（d值）；
});
//为日期名称添加一个小标签。
svg.append（“文本”）
.attr（“x”，宽度-6）
.attr（“y”，高度-6）
.style（“文本锚定”、“结束”）
.文本（功能（d）{
返回d.key；
});
});
功能类型（d）{
d、 应力=+d.应力；
d、 时间=解析日期（d.时间）；
d、 烟熏=+d.烟熏；
返回d；
}

csv文件的几行：

日期、时间、压力、吸烟
2014-08-04,11:24:28,0.026191,-1
2014-08-04,11:24:29,0.026183,-1
2014-08-04,11:24:30,0.031845,-1
2014-08-04,11:24:31,0.01235，-1

---

谢谢

在为每个元素设置y比例之前，您正在绘制点。我通常喜欢在每个循环的内部创建一个，以避免像这样棘手的事情。看起来y轴也关闭了-它们在每个绘图上应该是不同的

<script>

    var margin = {top: 8, right: 10, bottom: 2, left: 10},
            width = 1160 - margin.left - margin.right,
            height = 100 - margin.top - margin.bottom;

    var parseDate = d3.timeParse("%H:%M:%S");

    var x = d3.scaleTime()
            .range([0, width]);

    var y = d3.scaleLinear()
            .range([height, 0]);

    var area = d3.area()
            .x(function (d) {
                return x(d.time);
            })
            .y0(height)
            .y1(function (d) {
                return y(d.stress);
            });

    var line = d3.line()
            .x(function (d) {
                return x(d.time);
            })
            .y(function (d) {
                return y(d.stress);
            });

    d3.csv("6000smokedData3.csv", type, function (error, data) {

        // Nest data by date.
        var dates = d3.nest()
                .key(function (d) {
                    return d.date;
                })
                .entries(data);

        // Compute the maximum stress per date, needed for the y-domain.
        dates.forEach(function (s) {
            s.maxPrice = d3.max(s.values, function (d) {
                return d.stress;
            });
        });

        // Compute the minimum and maximum time across dates.
        // We assume values are sorted by time.
        x.domain([
            d3.min(dates, function (s) {
                return s.values[0].time;
            }),
            d3.max(dates, function (s) {
                return s.values[s.values.length - 1].time;
            })
        ]);

        // Add an SVG element for each date, with the desired dimensions and margin.
        var svg = d3.select("body").selectAll("svg")
                .data(dates)
                .enter().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 + ")");

        //Add the scatterplot
        svg.selectAll("dot")
                .data(data)
                .enter().append("circle")
                .attr("r", 4)
                .style("fill", function (d) {
                    return "red";
                })
                .attr("cx", function (d) {
                    if (d.smoked == 1) {
                        return x(d.time);
                    }
                })
                .attr("cy", function (d) {
                    if (d.smoked == 1) {
                        return y(d.stress);
                    }
                });

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

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

        // Add the area path elements. Note: the y-domain is set per element.
        svg.append("path")
                .attr("class", "area")
                .attr("d", function (d) {
                    y.domain([0, d.maxPrice]);
                    return area(d.values);
                });

        // Add the line path elements. Note: the y-domain is set per element.
        svg.append("path")
                .attr("class", "line")
                .attr("d", function (d) {
                    y.domain([0, d.maxPrice]);
                    return line(d.values);
                });

        // Add a small label for the date name.
        svg.append("text")
                .attr("x", width - 6)
                .attr("y", height - 6)
                .style("text-anchor", "end")
                .text(function (d) {
                    return d.key;
                });
    });

    function type(d) {
        d.stress = +d.stress;
        d.time = parseDate(d.time);
        d.smoked = +d.smoked;
        return d;
    }

</script>