Question

我正在尝试在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））

Answer 1

D3的.data()函数需要一个项目数组，每个项目代表您选择的一个DOM元素（在您的情况下为.area）。你传入一个点数组，这意味着D3将每个点与一个新的DOM元素相匹配。所以area函数正在传递一个点。

当您在此上下文中明确调用area(data)时，您实际上会获得多个区域 - 每点一个。

为了使这项工作不明确地给出参数，将区域数据作为数组传递，即

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

区域（数据）有效，但区域不是d3.js

1 个答案: