Question

我正在使用D3 Zoomable Treemap来显示一些数据。但是我想用它来表示“首先是一个单词，然后点击一个带有该单词的句子”。我尝试了所有方法来实现它，但没有得到我所期望的......

Here I tried my code in JSfiddle以下是我提供给treemap的JSON输入数据

JSON

{
     "name": "Hottopics",
    "children": [
    {
    "name": "OPEN",
     "children": [
        {"name": "federal OPEN market committee", "size": 3938}
        ]
     },
     {
     "name": "MORTGAGE",
     "children": [

        {"name": "fixed MORTGAGE rates hit", "size": 3812}
     ]
     },
     {
     "name": "DAY",
     "children": [

        {"name": "thurs DAY everyone who", "size": 6714}
     ]
     },
     {
     "name": "BATHS",
     "children": [

        {"name": "BATHS napx sf", "size": 743}
     ]
     },
     {
     "name": "MARKET",
     "children": [

        {"name": "housing MARKET is slated", "size": 3534}
     ]
     },
     {
     "name": "WEEK",
     "children": [

        {"name": "WEEK realestate mortgages", "size": 5731}
     ]
     },
     {
     "name": "HOUSING",
     "children": [

        {"name": "mortgages HOUSING marketnthe freddie", "size": 7840}
     ]
     },
     {
     "name": "SUMMER",
     "children": [

        {"name": "best SUMMER day camps", "size": 5914}
     ]
     },
     {
     "name": "IDEAS",
     "children": [

        {"name": "creative IDEAS amp unusual", "size": 3416}
     ]
     },
     {
     "name": "CHECK",
     "children": [

        {"name": "solstice CHECK it outsummersolstice", "size": 7074}
     ]
     }
     ]
}

在上面的JSON中，我想首先显示“OPEN”，当点击“OPEN”时，我想显示“联邦OPEN市场委员会”。像这样我想展示整个内容。

Answer 1

这可以通过以下方式实现：

在初始文本功能中使用：

.text(function (d) {
     return d.parent['name'];
 })

在缩放方法中：

//In the beginning of zoom method:
var nodeCurr = d;

// Other code

//In text selection block of zoom method
t.select("text")
.attr("x", function (d) {
    return kx * d.dx / 2;
})
.attr("y", function (d) {
    return ky * d.dy / 2;
})
.text(function (d) {
    var text = nodeCurr.depth > 0 ? d.name : d.parent['name'];
    return text;
})
.style("opacity", function (d) {
    return kx * d.dx > d.w ? 1 : 0;
});

我在这里更新了你的小提琴：http://jsfiddle.net/prashant_11235/fxz56/1/

您可以访问工作代码。

D3 zoomable treemap的问题

1 个答案: