点击获取text()内容

Question

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

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

*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>

Answer 1

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

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

不过这个方法也行

console.log(e.target.textContent)

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

console.log(e.target)

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

比如你要测试一下：

console.log(e.target.__data__)

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

点击获取text()内容

Get text() Content by Click

html

javascript

jquery

json

d3.js