d3散点图中每个数据集的唯一符号 [英] Unique symbols for each data set in d3 Scatterplot

问题描述

我无法使用d3的符号机制为每组数据指定唯一的符号。数据如下：
[[{x：1，y：1}，{x：2，y：2}，{x：3，y：3} 1}，{x：2，y：4}，{x：3，y：9}]等]

I am having trouble using d3's symbol mechanism to specify a unique symbol for each set of data. The data's like this: [[{x: 1, y:1},{x: 2, y:2},{x: 3, y:3}], [{x: 1, y:1},{x: 2, y:4},{x: 3, y:9}], etc.]

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

The part of the code that writes out the symbols looks like this: I create a series group for each vector of points. Then:

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是什么（系列的索引）。

Or at least that's how I'd like it to work. The trouble is that I can't return the function d3.svg.symbol() from the other function. If I try to just put the function in the "type" argument, then data is no longer scoped correctly to know what j is (the index of the series).

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

right, but I don't want a unique symbol for each datapoint, I want a unique symbol for each series. The data consists of multiple arrays (series), each of which can have an arbitrary number of points (x,y). I'd like a different symbol for each array, and that's what j should give me. I associate the data (in the example, two arrays shown, so i is 0 then 1 for that) with the series selection. Then I associate the data Object with the points selection, so i becomes the index for the points in each array, and j becomes the index of the original arrays/series of data. I actually copied this syntax from somewhere else, and it works ok for other instances (coloring series of bars in a grouped bar chart for example), but I couldn't tell you exactly why it works...

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

Any guidance would be appreciated. Thanks!

推荐答案

究竟是什么问题？您提供的代码可以解答您的问题。我的坏，j确实返回一个参考的系列。更简单的例子。

What is the question exactly? The code that you give answers your question. My bad, j does return a reference to the series. Simpler example.

   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用于检索有意义的数据。使用符号，您必须使用symbol（）（）。

The only difference is that I added parenthesis after d3.svg.symbol().type(currentType)() to return the value rather than the function. D3js uses chaining, jquery style. This let you use symbol().type('circle') to set a value and symbol().type() to get it. Whenever accessors are used, what is returned is a reference to a function that has methods and attributes. Keep in mind that, in Javascript functions are first class objects - What is meant by 'first class object'?. In libraries that use that approach, often, there is an obvious getter for retrieving meaningful data. With symbol, you have to use symbol()().

符号功能之外的代码可以在 https://github.com/mbostock/d3/blob/master/src/svg/symbol.js

The code beyond the symbol functionality can be seen at: 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;
};

这篇关于d3散点图中每个数据集的唯一符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！