Question

D3-Tip的回调函数传递整个数据数组而不是上下文中的对象。我可能在错误的地方挂钩。

    /* Initialize tooltip */
    var tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
        console.log(d);
        return d;
    });

    var margin = {top: 20, right: 20, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%d-%b-%y").parse,
            timeFormat = d3.time.format('%Y-%m-%d'),
            valueFormat = d3.format(',.2fs');

    var x = techan.scale.financetime()
            .range([0, width]);

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

    var candlestick = techan.plot.candlestick()
            .xScale(x)
            .yScale(y);

    var trendline = techan.plot.trendline()
            .xScale(x)
            .yScale(y)
            .on("mouseenter", enter)
            .on("mouseout", out)
            .on("drag", drag);

    var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

    var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

    var svg = d3.select("#candle-stick").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 + ")");

    var valueText = svg.append('text')
            .style("text-anchor", "end")
            .attr("class", "coords")
            .attr("x", width - 5)
            .attr("y", 15);


    var data = [
        { date: "9-Jun-14", open: 62.40, high: 63.34, low: 61.79, close: 62.88, volume: 37617413 },
        { date: "6-Jun-14",open: 63.37, high: 63.48, low: 62.15, close: 62.50,volume: 42442096 },
        { date: "5-Jun-14",open: 63.66, high: 64.36, low: 62.82, close: 63.19,volume: 47352368 },
        { date: "4-Jun-14",open: 62.45, high: 63.59, low: 62.07, close: 63.34,volume: 36513991 },
        { date: "3-Jun-14",open: 62.62, high: 63.42, low: 62.32, close: 62.87,volume: 32216707 },
        { date: "2-Jun-14",open: 63.23, high: 63.59, low: 62.05, close: 63.08,volume: 35995537 },
        { date: "30-May-14",open: 63.95, high: 64.17, low: 62.56, close: 63.30,volume: 45283577 }
    ];


    var accessor = candlestick.accessor();
    data = data.slice(0,200).map(function(d) {
        return {
            date: parseDate(d.date),
            open: +d.open,
            high: +d.high,
            low: +d.low,
            close: +d.close,
            volume: +d.volume
        };
    }).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });
    x.domain(data.map(accessor.d));
    y.domain(techan.scale.plot.ohlc(data, accessor).domain());

    svg.append("g")
            .datum(data)
            .attr("class", "candlestick")
            .call(candlestick)
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Price ($)");

    /* Invoke the tip in the context of your visualization */
    svg.call(tip)

    // functions

    function enter(d) {
        valueText.style("display", "inline");
        refreshText(d);
    }

    function out(d) {
        valueText.style("display", "none");
    }

您可以在http://jsfiddle.net/sisir/ghox8ewa/1/

查看代码

（将鼠标悬停在烛台上时查看控制台）

Answer 1

 /* Initialize tooltip */
var tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
console.log(d);
return d;
});

在上面的工具提示中，您将为html返回d，将其更改为

 /* Initialize tooltip */
var tip = d3.tip().attr('class', 'd3-tip').html(function(d, i) {
return d[i].open;//your required text here
});

希望这就是你要找的...... 如果没有要求更多。

上图中的问题是我们遵循的方法，我们通过编写下面的代码

来绘制烛台和装订工具提示到这个烛台

svg.append("g")
            .datum(data)
            .attr("class", "candlestick")
            .call(candlestick)
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

从上面的代码返回一个'g'类'烛台' （查看编写此代码

var candle=    svg.append("g")
                .datum(data)
                .attr("class", "candlestick")
                .call(candlestick)
console.log(candle);

）我们正在绑定工具提示，所以它将数据（整个数据对象）作为参数返回到我们的工具提示，为了满足我们的要求，我已经在下面的小提琴中实现并开发了所需的代码 http://jsfiddle.net/ghox8ewa/5/

请点击链接并尝试分析.... 如果你还有疑问，请多多问我。

传递D3-Tip回调的参数是完整的数据数组

1 个答案: