Блог

Я не знаю, почему всплывающая подсказка не появляется. Вот мой код:

 // set the dimensions and margins of the graph
var margin = { top: 20, right: 30, bottom: 50, left: 90 }
var width = 460 - margin.left - margin.right
var height = 2000 - margin.top - margin.bottom;

const dataUrl = "https://raw.githubusercontent.com/yushinglui/IV/main/course_distance_v2.csv"

//fetch the data
d3.csv(dataUrl)
    .then((data) => {

        // append the svg object to the body of the page
        var svg = d3.select("#graph-1")
            .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   ")");

            
  
        // Add X axis
        var x = d3.scaleLinear()
            .domain([0, 60])
            .range([0, width]);

        svg.append("g")
            .attr("transform", "translate(0,"   height   ")")
            .call(d3.axisBottom(x))
            .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");
        
        
  
        // Y axis
        var y = d3.scaleBand()
            .range([0, height])
            .domain(data.map(function (d) { return d.CourseCode; }))
            .padding(0.1);
  
          

        svg.append("g")
            .call(d3.axisLeft(y))
        
        // create tooltip element  
        const tooltip = d3.select("body")
            .append("div")
            .attr("class", "d3-tooltip")
            .style("position", "absolute")
            .style("z-index", "10")
            .style("visibility", "hidden")
            .style("padding", "15px")
            .style("background", "rgba(0,0,0,0.6)")
            .style("border-radius", "5px")
            .style("color", "#fff")
            .text("a simple tooltip");

        //Bars
        let bars = svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")

            .attr("x", function (d) { return 1; })
            .attr("y", function (d) { return y(d.CourseCode); })
            .attr("width", function (d) { return x(d.AverageDistance); })
            .attr("height", function (d) { return y.bandwidth(); })
            .attr("fill", "orange");
  
            .on("mouseover", function (d, i) {
                tooltip.html(`CourseName: ${d.CourseName}`).style("visibility", "visible");
                d3.select(this)
                    .attr("fill", "orangered");
            })
            .on("mousemove", function () {
                tooltip
                    .style("top", (event.pageY - 10)   "px")
                    .style("left", (event.pageX   10)   "px");
            })
            .on("mouseout", function () {
                tooltip.html(``).style("visibility", "hidden");
                d3.select(this).attr("fill", "orange");
            });
  
        //axis labels

        svg.append('text')
            .attr('x', -(height / 2))
            .attr('y', width - 410)
            .attr('transform', 'rotate(-90)')
            .attr('text-anchor', 'middle')
            .text('Course Code');

        svg.append('text')
            .attr('x', 150)
            .attr('y', 1970)
            .attr('transform', 'rotate()')
            .attr('text-anchor', 'middle')
            .text('Average Distance (Miles)');

         
  
        //text labels on bars

        svg.selectAll(null)
            .data(data)
            .enter()
            .append("text")
            .text(function (d) { return d.AverageDistance; })

            .attr("x", function (d) { return x(d.AverageDistance)   15; })
            .attr("y", function (d) { console.log(d); return y(d.CourseCode)   y.bandwidth() * (0.5   0.1); })


            .attr("font-family", "sans-serif")
            .attr("font-size", "12px")
            .attr("fill", "black")
            .attr("text-anchor", "middle");

  
        

    })
 

мой справочный веб-сайт:

https://perials.github.io/responsive-bar-chart-with-d3/

https://observablehq.com/@bsaienko/animated-bar-chart-with-tooltip

https://blockbuilder.org/1Cr18Ni9/bfadecc96183c48d13b7b90bcf358a61

http://bl.ocks.org/katirg/5f168b5c884b1f9c36a5