D3小工具欄上的工具提示

Question

我無法在小工具箱中的每個圓圈上顯示工具提示（使用d3-tip）。我收到以下錯誤消息：「未捕獲的類型錯誤：無法設置屬性'x'null」。

我認爲問題出在我的「提示」變量的定義中。我不確定我應該定義哪個鍵。

有沒有人有提示？

謝謝你在前進，

弗洛朗

<script> 

var margin = {top: 8, right: 10, bottom: 2, left: 10}, 
    width = 635 - margin.left - margin.right, 
    height = 50 - margin.top - margin.bottom; 

var parseDate = d3.time.format("%Y.%m.%d").parse; 

var x = d3.time.scale() 
    .range([0, width]); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var area = d3.svg.area() 
    .x(function(d) { return x(d.date); }) 
    .y0(height) 
    .y1(function(d) { return y(d.value); }); 

var line = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.value); }); 



d3.csv("data.csv", type, function(error, data) { 
    var keys = d3.nest() 
     .key(function(d) { return d.key; }) 
     .sortValues(function(a,b) { return d3.ascending(a.date, b.date)}) 
     .entries(data); 

    x.domain([ 
    d3.min(keys, function(key) { return key.values[0].date; }), 
    d3.max(keys, function(key) { return key.values[key.values.length - 1].date; }) 
    ]); 

    var svg = d3.select("body").selectAll("svg") 
     .data(keys) 
    .enter().append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .each(multiple); 

    svg.append("text") 
     .attr("x", width - 6) 
     .attr("y", height - 6) 
     .style("text-anchor", "end") 
     .text(function(d) { return d.key; }); 

}); 

var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function(d) { 
    return "<strong>" + d.value + "</strong>" 
    // + "\t" 
    // + year.values + "</strong><br/><span style='color:#fff'>" + value.values + " députés élus" 
    ; 
    }) 

function multiple(key) { 
    var svg = d3.select(this); 

    y.domain([0, d3.max(key.values, function(d) { return d.value; })]); 

    svg.append("path") 
     .attr("class", "area") 
     .attr("d", area(key.values)); 

    svg.append("path") 
     .attr("class", "line") 
     .attr("d", line(key.values)); 


svg.selectAll(".circle") 
    .data(key.values) 
    .enter() 
    .append("svg:circle") 
    .attr("class", "circle") 
    .attr("cx", function (d, i) { 
    return x(d.date); 
}) 
    .attr("cy", function (d, i) { 
    return y(d.value); 
}) 
    .attr("r", 5) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide) 
    console.log(key.values) 

} 

Answer 1

我有同樣的問題。我認爲這可能是一個沒有'x'或'y'值的圈子的問題。原來我只是缺少

svg.call(tip);