area(data）有效，但area不起作用

area(data) works but area does not d3.js

本文关键字：area 不起作用 data 有效      更新时间：2024-04-12

我正试图在d3.js中创建一个面积图。我编写了以下函数：

  @drawAreaChart = (element,chart_value)->
console.log("Im in")
height=400              
data=chart_value
chart_area=d3.select(element)
area = d3.svg.area().x( (d) -> 
  return d.x 
)
.y0(height)
.y1( (d) ->          
  return height-d.y
).interpolate("linear")
line = d3.svg.line().x( (d) -> 
  return d.x
)
.y( (d) ->          
  return height-d.y
).interpolate("linear")
chart_area.selectAll(".line").data(data).enter().append("path").attr("d",line(data)).attr("class","line").attr("fill","none").attr("stroke","rgb(100,153,255)").attr("stroke-width",2)    
chart_area.selectAll(".area").data(data).enter().append("path").attr("d",area(data)).attr("class",".area").attr("fill","url(#gradient-effect)")    
return

正在向chart_value传递以下数据：

      charts.drawAreaChart("#area-graph",[{"x":0,"y":100},
                                      {"x":100, "y":200},
                                      {"x":200,"y":250},
                                      {"x":300, "y":300},
                                      {"x":400, "y":230},
                                      {"x":500, "y":260},
                                      {"x":600, "y":160}]);

该函数位于图表模块中，因此正在调用charts.drawAreaChart。现在的问题是，上面的代码适用于静态数据。我还没有测试动态数据。但是，如果我使用

chart_Area.selectAll(".area").data(data).enter().append("path").attr("d",area)

而不是

chart_Area.selectAll(".area").data(data).enter().append("path").attr("d",area(data))

图表不会出现。同样的情况也发生在我的折线图上，但在另一个函数中，我创建了一个弧，在那里我不需要将其写为attr（"d"，arc（data））

D3的.data()函数需要一个项数组，每个项表示您一直在选择的DOM元素之一（在您的例子中是.area）。您正在传递一个点数组，这意味着D3将每个点匹配到一个新的DOM元素。因此，area函数只传递一个点。

当您在此上下文中显式调用area(data)时，您实际上得到了几个区域——每个点一个。

要在不明确给出参数的情况下实现此操作，请将区域数据作为数组传递，即

chart_Area.selectAll(".area").data([data]).enter().append("path").attr("d",area);
相关文章：