獨特的符號每個數據D3散點圖

我使用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}]等]獨特的符號每個數據D3散點圖

寫出符號的代碼部分如下所示：我爲每個點的傳染媒介。然後：

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應該給我的。我將這些數據（例如，顯示的兩個數組，因此我是0，然後是1）與系列選擇相關聯。然後我將數據對象與點選擇相關聯，所以我成爲每個數組中點的索引，並且j成爲原始數組/數據序列的索引。其實，我從別的地方複製這種語法，它的作品確定爲其它實例（着色系列例如分組條形圖在酒吧），但我不能告訴你到底爲什麼它的工作原理...

任何指導意見將不勝感激。謝謝！

來源

2013-03-12 user1885761

你能否澄清j的用法在你的「d」的屬性功能的第三個參數？我不明白它傳遞英寸 – 2013-03-12 23:59:00

安德魯指出，鑑於.attr（「d」，函數（d，I，J）{}），J應始終爲0使用d3.svg.symbolTypes [I]相反，因爲我引用每個數據點的（唯一）索引值。 – widged 2013-03-13 08:56:45

萬一你沒有。你有沒有嘗試過？

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

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

來源

2013-03-13 08:59:45 widged

是的，試過了，它給了我每個數據點的相同符號，並不完全符合要求。 – user1885761 2013-03-13 14:29:18

確實「[0,1,2] .forEach（function（d，i）{console.log（i，d3.svg.symbol（）（））;}）;」每次迭代返回相同的符號。 – widged 2013-03-13 23:19:50

符號（datum [，index]）似乎沒有使用i值。 [0,1,2] .forEach（function（d，i）{console.log（i，d3.svg.symbol（d，i）（））;}）;返回相同的符號。您建議的解決方法似乎是唯一一個返回不同符號的解決方案。 – widged 2013-03-13 23:21:44

問題是什麼是什麼呢？您提供的代碼可以解答您的問題。我的不好，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後添加括號（）。類型（currentType）（）返回的值，而不是功能。 D3js使用鏈接，jquery風格。這讓你使用symbol（）。type（'circle'）來設置一個值和符號（）。type（）來獲取它。每當使用訪問器時，返回的是對具有方法和屬性的函數的引用。請記住，在JavaScript函數中是第一類對象 - What is meant by 'first class object'?。在使用這種方法的圖書館中，通常有一個顯而易見的獲取有意義數據的方法。使用符號，您必須使用symbol（）（）。

超越了符號功能的代碼可以看出：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-14 01:10:01 widged

謝謝！這是完美的，非常感謝，修復和教程。 – user1885761 2013-03-14 19:24:42

很高興你發現它很有用。讓我知道j。整齊。 – widged 2013-03-18 02:15:45

獨特的符號每個數據D3散點圖

回答

相關問題