javascript - data() 范围内未定义的折线坐标的计算

Question

我在计算 svg:poly 元素的 "d" 属性时遇到问题。我做了这个情况的模型:

演示 http://jsfiddle.net/2efxadLy/1/

// array of points
var points = [{
    name: "a",
    coord: [22, 35]
}, {
    name: "b",
    coord: [2, 55]
}, {
    name: "c",
    coord: [42, 5]
}, {
    name: "d",
    coord: [5, 57]
}];

// array of connectors
var connectors = [
    ["a", "c"],
    ["b", "c"],
    ["d", "a"]
];

// styles
var styles = {
line: {
    "stroke": "black",
    "stroke-width": 1,
    "fill": "none"
},
board: {
    "width": 100,
    "height": 100
}};

// svg element
var svg = d3.select("body").append("svg").attr(styles.board);

// three connectors between points
var path = svg.selectAll("path").data(connectors).enter().append("svg:path").attr(styles.line);
// attempt to fill the "d" attribute of the path
path.attr("d", function (d) {// d -- the array of connector pair ["a", "c"] etc. 
    var from = d[0],// "a"
        to = d[1],// "c"
        point_from = points.filter(function (item) {// [22,35]
            return (item.name === from);
        })[0],
        point_to = points.filter(function (item) {// [42,5]
            return (item.name === to);
        })[0];
    var coords = [point_from, point_to];
    // ERROR!
    // I can not place coords in line() function
    // the line() function expects some "d3.data" type argument
    // but there is no "d3.selection" to produce this data type
    var l = d3.svg.line(/* missed content */).extrapolate("basis");
    return(l);
});

结果，我有 3 个没有“d”属性的路径:

我知道，我可以使用该模式，我将在其中一一添加连接器:

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

connectors.forEach(function(pair){
    var from = pair[0], to = pair[1];
    var coordinate_array = [{x: ..., y; ...},{x: ..., y; ...}];
    board.data(coordinate_array).enter().append("svg:path").attr("d", line_function(coordinate_array)).attr(...);
});

但我正在寻找一些“内联”的 native d3 解决方案。我应该在绘图之前“准备数据”的解决方案在我的情况下不起作用。这只是复杂问题的模型。抱歉!

Answer 1

我想你可能有点误解了d3.svg.line()用来。在此示例中:

var lineGenerator = d3.svg.line()

lineGenerator是一个函数，它接受一个点数组并返回一个字符串，该字符串是分配给属性 <path d="..."> 的路径描述。 .

在这一切中，不需要绑定(bind)到 d3 选择。

因此，您可以根据您的coords为您需要的路径描述创建一个生成器。像这样的数组:

// converts an array of 2 points (coords) or svg line path data
var lineGenerator = d3.svg.line()
  .x(function(point) { return point.coord[0]; })
  .y(function(point) { return point.coord[1]; })
  .interpolate("basis")

稍后，在 path.attr("d", function (d) { ... }) 内，组装完后var coords = [point_from, point_to] ，只需调用线生成器即可。

return lineGenerator(coords);

这是fiddle