工具提示未显示在d3js美国十六进制图上

Question

我正在尝试将工具提示添加到“美国十六进制地图”中。它正在创建div，但同样没有坐标和状态数据通过。由于图形的复杂性，我无法找到工具提示的x和y

我正在尝试完全在其他图形工具提示中完成操作，但是无法放置x和y坐标。放置所有代码，因为没有它很难理解。但是经过多次试验之后，我必须说这是具有挑战性的

 <div class="panel panel-primary" style="width: 1500px;background-color:inherit; height: 570px; border:none">
           <div class="row">
              <div id="vis"  class="tile-stats" style="background-color: white; width:918px; border:1px solid blue;  height:568px; margin-left:10px">
                <svg style="margin-bottom:0px; "></svg>
            </div>
             <div id="Graph" class="tile-stats" style="background-color: white; width:100%;max-width:46.5%; border:1px solid blue; margin-left:935px;margin-right:15px; margin-top:-580px; height:568px; overflow:auto">
             <div class="col-md-12"  style="color:grey;font-family:'UHC Sans'; font-size:20px;font-weight:bold; padding:10px; text-align:center;">#Providers by Reason</div>
             <div id="lollipop"></div>
            </div>
            </div>
        </div>

  <script type="text/javascript">
        'use strict';

function render() {

    var w = 950;
    var h = 550;
    var stateCodesWithNames = window.stateCodesWithNames;
    var topojson = window.topojson;
    var d3 = window.d3;
    var _ = window._;

    //Loading the data
    var data = [<%=StateString%>];



    var f = d3.format('.1f');

    // var color = d3.scaleSequential(d3.interpolateViridis)
    // color.domain([0, 100])

    var svg = d3.select('svg').attr('width', w).attr('height', h);

    d3.json('tiles-topo-us.json', function showData(error, tilegram) {
        var tiles = topojson.feature(tilegram, tilegram.objects.tiles);

        var transform = d3.geoTransform({
            point: function point(x, y) {
                return this.stream.point(x, -y);
            }
        });

        var path = d3.geoPath().projection(transform);


        var g = svg.append('g').attr('transform', 'translate(-350,' + (h ) + ')');

        // build list of state codes
        var stateCodes = [];
        // build list of state names
        var stateNames = [];
        // build a list of colour values
        var colorValues = [];

        tilegram.objects.tiles.geometries.forEach(function (geometry) {
            if (stateCodes.indexOf(geometry.properties.state) === -1) {
                stateCodes.push(geometry.properties.state);
                // pass in state names
                stateNames.push(_.find(stateCodesWithNames, { 'code': geometry.properties.state }).state);
                // pass in colour values
                colorValues.push(_.find(data, { 'code': geometry.properties.state }).value);
            }
        });



        var linear = d3.scaleLinear().domain([0, _.mean(colorValues), d3.max(colorValues)]).range(['#7ca6fe', '#3072fd', '#0249de']);

        var borders = g.selectAll('.tiles').data(tiles.features).enter().append('path').attr('d', path).attr('class', 'border').attr('fill', function (d, i) {
            return linear(colorValues[i]);
        }).attr('stroke', '#FFFFFF').attr('stroke-width', 4);

        borders.on('mouseover', function (d, i) {
            d3.select('#state').text(stateNames[i] + ' : ' + f(colorValues[i]));
        });

        // add some labels
        g.selectAll('.state-label').data(tiles.features).enter().append('text').attr('class', function (d) {
            return 'state-label state-label-' + d.id;
        }).attr('transform', function (d) {
            return 'translate(' + path.centroid(d) + ')';
        }).attr('dy', '.10em')
            //.attr('dx', '5px')
            .text(function (d) {
                return d.properties.state;
            })
            .style('opacity', 0)
            .transition()
            .delay(1500)
            .duration(500)
            .style('opacity', 1);



        // Add Linear Line
        svg.append('g').attr('class', 'legendLinear').attr('transform', 'translate(720,510)');

        var legendLinear = d3.legendColor().shapeWidth(40).cells(4).labelFormat(function (d) {
            return _.round(d, -1);
        }).orient('horizontal').scale(linear);

        svg.select('.legendLinear').call(legendLinear);

        svg.select('.legendLinear').append('text').attr('x', 0).attr('y', -10).attr('text-anchor', 'center').text('# Provider');

        //var div = d3.select("body").append("div")
        //    .attr("class", "tooltip")
        //    .style("opacity", 0);
        svg.append('g').attr('class', 'ToolTips').attr('transform', 'translate(600,510)');

        svg.selectAll("ToolTips")
            .data(data)
            .enter()
            .append('div')
            .attr('class', 'tooltip')
            .attr("stroke", "black")
            .attr("fill", "aliceblue")
            .attr('x', 0)
            .attr('y', function (d) { return (d.value); })
            .on("mouseover", function (d) {
                div.transition()
                    .duration(200)
                    .style("opacity", .9);
                div.html(d.code  + "<br/>" + d.value)
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY) + "px")
            });



        svg.append('text')
            .attr("class", "title")
            .attr("x", w / 2)
            .attr("y", 0 - (margin.top / 2)+35)
            .attr("font-size","20px")
            .text("StateWise Distribution")
            .attr("font-family", "UHC Sans")
            .attr("fill", "grey")
            .attr("font-weight","bold")
            .style("text-anchor", "middle")
            .style('opacity', 1);

    });
}

    </script>

    <script>
        render();

        d3.select(self.frameElement).style('height', '650px');
    </script> 

想显示热图状态值的工具提示。 数据举例 状态值 AZ 10 CA 20 FA 90