D3JS-在散點圖中同時顯示圓形和三角形

Question

我在D3JS散點圖上顯示了一個數據集。 基本上，數據集的點是（x，y，category），我想將“類別A”繪制為橙色圓圈，將“類別B”繪制為藍色三角形。

[今天]顏色還可以，但是所有點都是圓圈：

[ ... ]
      var color = d3.scale.ordinal()
          .domain(["Category A", "Category B"])
          .range(["#f76800", "#000066"]);

  // draw dots
  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 7)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) {
           return color(d.category);
      ;})
[ ... ]

我在D3.js中發現了該線程Triangle散點圖，因此我嘗試了-但沒有成功-類似於：

[ ... ]
      var color = d3.scale.ordinal()
          .domain(["Category A", "Category B"])
          .range(["#f76800", "#000066"]);

  // draw dots
  svg.selectAll(".dot")
      .data(data)
    .enter().append((d.category == "Category A") ? "circle":"path")
      .attr((d.category == "Category A") ? "CIRCLE attr":"TRIANGLE attr")
      .style("fill", function(d) {
           return color(d.category);
      ;})
[ ... ]

這是合理的嘗試嗎？

編輯：嘗試

[ ... ]
  svg.selectAll(".dot")
      .data(data)
    .enter().append((d.category == "A") ? "path":"circle")
    .attr((d.category=="A") ? ({"d":d3.svg.symbol().type("triangle-up"), "transform":"translate(" + xMap + "," + yMap + ")"}):({"class":"dot", "r":7, "cx":xMap, "cy":yMap}))
      .style("fill", function(d) {
           return color(d.category);
      ;})
      .style("opacity", .95 )
      .style("stroke-width", function(d) {
            if (d.category == "A") {return 0.95}
            else { return 0 }
      ;})
[ ... ]

結果：Firebug控制台中的“ ReferenceError：d未定義”

編輯2-數據子集

這可能會有所幫助：查看完整的代碼，這里是實際的網站： http : //www.foolset.com/SNES.php ?Jeu= Whirlo 。 請注意，此處出於教育目的提及的字段“ d.category”實際上是“ d.site”。

數據子集：數據來自MySQL請求，字段包括：“ prix”（用於Y值），“ date”（用於X值）和“ site”（即上面的類別）。 其他字段與此處無關。 請在此處找到數據子集： http : //www.pastebin.com/khdXCSNx

Answer 1

代替表達式，您需要提供對.append()和.attr()回調，就像對.style()的調用.style() 。 因為調用函數時表達式僅被求值一次，所以它們將為所有點提供恆定值。 這就是為什么顏色（即style("fill", function() {})可以，而形狀卻不能。 此外，這是ReferenceError抱怨d undefined的一種解釋。

盡管該回調對於.append()很好地工作，但我懷疑是否存在一種簡單的方法來以這種方式設置屬性。

svg.selectAll(".dot")
    .data(data)
    .enter().append(function(d) {     // This needs to be a callback, too.
        var type = d.category == "Category A" ? "circle" : "path";
        // In this case, you need to create and return the DOM element yourself. 
        return document.createElementNS("http://www.w3.org/2000/svg", type);
      })
      .attr(
        // Not sure, if there is an easy solution to setting the attributes.
      )
      .style("fill", function(d) {    // This one already uses a callback function.
           return color(d.category);   
      ;})

您的方法似乎過於復雜，感覺就像是一條死路。 我建議堅持您所鏈接的示例，該示例利用d3.svg.symbol()路徑生成器，該路徑生成器通過設置適當的type同時支持圓形和三角形 。

svg.selectAll(".dot")
    .data(data)
  .enter().append("path")
    .attr("d", d3.svg.symbol().type(function(d) {
        return d.category == "Category A" ? "triangle-up" : "circle";
    }))
    .attr("transform", function(d) {
        return "translate(" + xMap(d) + "," + yMap(d) + ")";
    });