1

我在使用 d3 的符号机制为每组数据指定唯一符号时遇到问题。数据是这样的： [[{x: 1, y:1},{x: 2, y:2},{x: 3, y:3}], [{x: 1, y:1},{ x: 2, y:4},{x: 3, y:9}] 等]

写出符号的代码部分如下所示：我为每个点向量创建一个系列组。然后：

series.selectAll("g.points") 
//this selects all <g> elements with class points (there aren't any yet)
.data(Object) //drill down into the nested Data
.enter() 
.append("g") //create groups then move them to the data location
.attr("transform", function(d, i) {
return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")";
        })
.append("path")
.attr("d", function(d,i,j){
        return (d3.svg.symbol().type(d3.svg.symbolTypes[j]));
    }
 );

或者至少我希望它是这样工作的。问题是我不能从另一个函数返回函数 d3.svg.symbol() 。如果我尝试仅将函数放在“类型”参数中，则数据的范围不再正确，无法知道 j 是什么（系列的索引）。

对，但我不想要每个数据点都有一个唯一的符号，我想要每个系列都有一个唯一的符号。数据由多个数组（系列）组成，每个数组可以有任意数量的点 (x,y)。我想为每个数组使用不同的符号，这就是 j 应该给我的。我将数据（在示例中显示了两个数组，因此 i 为 0 然后为 1）与系列选择相关联。然后我将数据对象与点选择相关联，因此 i 成为每个数组中点的索引，而 j 成为原始数组/数据系列的索引。我实际上是从其他地方复制了这个语法，它适用于其他实例（例如，在分组条形图中着色一系列条形），但我无法确切告诉你它为什么起作用......

任何指导将不胜感激。谢谢！

4

2 回答 2

6

究竟是什么问题？您提供的代码回答了您的问题。我的错， j 确实返回了对该系列的引用。更简单的例子。

   var data = [
        {id: 1, pts: [{x:50, y:10},{x:50, y:30},{x:50, y:20},{x:50, y:30},{x:50, y:40}]},
        {id: 2, pts: [{x:10, y:10},{x:10, y:30},{x:40, y:20},{x:30, y:30},{x:10, y:30}]}
    ];
    var vis = d3.select("svg");
    var series = vis.selectAll("g.series") 
        .data(data, function(d, i) { return d.id; })
        .enter() 
        .append("svg:g")
        .classed("series", true);

    series.selectAll("g.point")
        .data(function(d, i) { return d.pts })
        .enter()
        .append("svg:path")
        .attr("transform", function(d, i) { return "translate(" + d.x + "," + d.y + ")"; })
        .attr("d", function(d,i, j) { return d3.svg.symbol().type(d3.svg.symbolTypes[j])(); })

唯一的区别是我在 d3.svg.symbol().type(currentType)() 之后添加了括号来返回值而不是函数。D3js 使用链接，jquery 样式。这使您可以使用 symbol().type('circle') 来设置一个值，并使用 symbol().type() 来获取它。每当使用访问器时，返回的是对具有方法和属性的函数的引用。请记住，在 Javascript 中，函数是一流的对象—— “一流的对象”是什么意思？. 在使用这种方法的库中，通常有一个明显的 getter 用于检索有意义的数据。使用符号，您必须使用符号（）（）。

超出符号功能的代码可见：https ://github.com/mbostock/d3/blob/master/src/svg/symbol.js

d3.svg.symbol = function() {
  var type = d3_svg_symbolType,
      size = d3_svg_symbolSize;

  function symbol(d, i) {
    return (d3_svg_symbols.get(type.call(this, d, i))
        || d3_svg_symbolCircle)
        (size.call(this, d, i));
  }

  ...

  symbol.type = function(x) {
    if (!arguments.length) return type;
    type = d3_functor(x);
    return symbol;
  };


  return symbol;
};
于 2013-03-14T01:10:01.257 回答
0

以防万一你没有。你有没有尝试过？

.append("svg:path")
.attr("d", d3.svg.symbol())

根据https://github.com/mbostock/d3/wiki/SVG-Shapes。

于 2013-03-13T08:59:45.647 回答