Javascript 如何在d3.js中仅使用一个值构建sparcline图

如何使用d3.js仅使用y值构建图表

 var dataOne = [
    {
        "x": 1,
        "y": 597
    },
    {
        "x": 2,
        "y": 298
    },
    {
        "x": 3,
        "y": 325
    },
    {
        "x": 4,
        "y": 876
    },]

现在，我正在使用以下代码使用x和y构建sparcline：

function displayGraphExampleOne(elemId,
                            width,
                            height,
                            circle_radius,
                            interpolation,
                            data,
                            last_element) {

var graph = d3.select(elemId).append("svg:svg")
                             .attr('width', '100%')
                             .attr('height', '100%')
                             .append('g')
                             .attr('transform', 'translate(0, 2)');


var x = d3.scale.linear().range([0, width - 2]);
var y = d3.scale.linear().range([height - 4, 0 ]);


var line = d3.svg.line().x(function (d) { return x(d.x); })
                        .y(function (d) { return y(d.y); })
                        .interpolate(interpolation);

x.domain(d3.extent(data, function (d) { return d.x; }));
y.domain(d3.extent(data, function (d) { return d.y; }));


graph.append("svg:path").attr("d", line(data))
                        .attr('id', 'linePath');
var sparkPoint = last_element;


graph.append('svg:circle')
        .attr('class', 'sparkcircle')
        .attr('cx', x(sparkPoint.x))
        .attr('cy', y(sparkPoint.y))
        .attr('r', circle_radius);

}

---

我是否只需要删除所有出现的x并只使用不带索引的实数值？

如果要使用数组中值的索引作为x位置，可以通过将索引指定为所有相关函数的第二个参数来实现：

var line = d3.svg.line().x(function (d, i) { return x(i); })
                        .y(function (d) { return y(d.y); })
                        .interpolate(interpolation);

x.domain([0, data.length]);
y.domain(d3.extent(data, function (d) { return d.y; }));


graph.append("svg:path").attr("d", line(data))
                        .attr('id', 'linePath');
var sparkPoint = last_element;


graph.append('svg:circle')
        .attr('class', 'sparkcircle')
        .attr('cx', x(data.length)) //I'm assuming, since sparkPoint=last_element
        .attr('cy', y(sparkPoint.y))
        .attr('r', circle_radius);

---

如果您没有数据的任何其他属性，您可以将y函数更改为使用d而不是d.y，从而为数据使用一个数字数组。

您希望该行看起来像什么？如果你只使用x，你会得到一条平坦的直线。这个x.domain0，data.length，不起作用，这个太扩展了。length，我还有这样的东西：var x=d3.scale.linear.rangex\u range；var y=d3.scale.linear.range y_range；哦，对不起，我已经更正了密码。域和范围方法的max和min必须是两个元素的数组，而不是两个单独的参数，因此它应该是x.domain[0，data.length]。