时间戳

首页 > 解决方案 > 点击获取 text() 内容

javascript - 点击获取 text() 内容

问题描述

想法：用户可以通过点击在世界地图中选择一个国家。并获取文本值。

问题：点击后，显示但不显示国家：

*S.fn.init(176) [title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title, title,*

请检查第 39 行 -$("g").click(function(){console.log($("title").text(this))});任何解决方案？初学者需要帮助！

const svg =d3.select("svg");

//d3.geoPath generates SVG path data string or renders the path to a canvas
//projection() 
const preProjection =d3.geoNaturalEarth1();
const pathDrawing = d3.geoPath().projection(preProjection);

const g = svg.append("g");

//draw sphere for squared map
g.append("path")
    .attr("class", "bgColor")
    .attr("d", pathDrawing({type: "Sphere"}));


//loading two files
Promise.all([
    d3.tsv("https://unpkg.com/world-atlas@1.1.4/world/110m.tsv"),
    d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json")
]).then(([idData, countryData]) => {

    const countryName = {};
    idData.forEach(data =>{
        countryName[data.iso_n3] = data.name;
    });

    const drawCountry = topojson.feature(countryData, countryData.objects.countries);
    g.selectAll("path").data(drawCountry.features)
    .enter().append("path")
    .attr("class", "drawCountry")
    .attr("d", pathDrawing)
    .append("title")
    //read countryName by id
    .text(
        d=>countryName[d.id]
    );
    //jQuery get()
    //$("g").click(function(){console.log($("title").text(d=>countryName[d.id]))});
    $("g").click(function(){console.log($("title").text(this))});
});

//d3.zoom() & panning
var zoom = d3.zoom().on("zoom", zoomed);
function zoomed(){
    g.attr("transform", d3.event.transform);
    };
var zoomElem = g.call(zoom);
//resetBtn
function resetBtn(){
    zoomElem.transition()
    .duration(750)
    .call(zoom.transform, d3.zoomIdentity);
}
body {
    margin: 0px;
    overflow: hidden;
  }
.bgColor {
    fill:darkblue;
}
.drawCountry{
    fill:lightgreen;
    stroke: black;
    stroke-width: 0.01px;
}

.drawCountry:hover{
    fill: rgba(238, 17, 17, 0.699);
}
<!DOCTYPE html>
<html>
    <head>NarrativeVis</head>
    <body>
        <link rel ="stylesheet" href="mapStyle.css">
        <script src = "https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>
        <script src = "https://unpkg.com/topojson@3.0.2/dist/topojson.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <svg width="959" height ="500"></svg>
        <script src = "map.js"></script>
        <input type = "button" value = "Reset" onclick='resetBtn()'/> 
    </body>
</html>

标签： javascripthtmljqueryjsond3.js

解决方案

正如Bravo之前所说，解决方案是获取国家名称如下：

$("g").click(function(e){console.log(e.target.data.properties.name ) });

但是这个方法也有效

console.log(e.target.textContent)

你问e到底是什么。它是一个处理程序（事件），它指的是您单击的元素（在这种情况下）。每一个事件都有它自己的功能。如果你想弄清楚它存储了什么样的值，只需在控制台中写出来，比如：

console.log(e.target)

这将向您展示您可以从当前上下文中使用什么样的事件/值。如果您想了解有关默认参数的更多信息，可以在任何其他字段中使用此方法。

例如，如果你想测试它：

console.log(e.target.__data__)

它还会向您显示有关您的选择的更多详细信息（如坐标）。

推荐阅读