Question

我使用质谱，并希望为d3，highcharts，nvd3或其他一些可视化工具中的输入光谱生成动态光谱视图。

这是我正在寻找的行类型：Impulse Plot example from Matlab

我的数据非常复杂（像这个问题的嵌入式数组...... How to draw line charts with complex data structures in d3），我不能像以前那样得到冲动：

var points = svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("line")
    .attr("x1", function (d, i) {
    return xScale(d[0]);
})
    .attr("y1", function (d) {
    return yScale(d[1]);
})
    .attr("x2", function (d) {
    return xScale(d[0]);
})
    .attr("y2", function (d) {
    return yScale(0);
})
    .attr("class", "impulse");

事实证明，我无法将嵌入式阵列拉到.data级别，因此我必须以不同的方式编写此代码。我试图按照链接的问题进行操作：

var line = d3.svg.line().x(function(d) { return xscale(d.timestamp); })
                        .y(function(d) { return yscale(d.value); });

但是，d3.svg.line()不支持我需要的x1,x2,y1,y2。

我认为这种嵌套对我来说会有很大帮助，现在，我只需要一种方法来渲染我的冲动。

Answer 1

通常，为了实现您在Highcharts中发布的图像，您可以使用散布系列和正确创建的数据：http://jsfiddle.net/Yrygy/94/

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'scatter'
    },
    plotOptions: {
        scatter: {
            lineWidth: 1,
            states: {
                hover: {
                    lineWidth: 1
                }
            }
        }
    },
    series: [{
        data: [
            {x: 0, y: 0, marker: { enabled: false } }, // bottom point
            [0, 51.6],                                 // top point
            null,                                      // break line point
            {x: 1, y: 0, marker: { enabled: false } },
            [1, 59.0],
            null,
            {x: 2, y: 0, marker: { enabled: false } },
            [2, 49.2]
        ]
    }]
});

d3中的冲动图

1 个答案: