如何突出D3詞雲詞的數組

我想亮點像「鮭魚」 &「獵物」，我想提供給我的詞雲，所以我應該怎麼辦字的新數組這是因爲我試圖在CSS中使用mark.js或Javascript，但無法成功，但現在我認爲只有在繪製詞雲時纔有可能。因此，有人可以幫我爲我提供了一個功能或者也許在我的代碼一些變化突出陣列的話（arrayToBeHighlight）：如何突出D3詞雲詞的數組

var width = 750, height = 500; 
var words = [["whales", 79], ["salmon", 56], ["Chinook", 30], ["book", 70], 
["prey", 51]].map(function(d) { 
    return {text: d[0], size: d[1]}; 
}); 

var arrayToBeHighlight = [ ["salmon", 56], ["prey", 51] ]; 
**OR** 
var arrayToBeHighlight = ["salmon", "prey"]; 

maxSize = d3.max(words, function(d) { return d.size; }); 
minSize = d3.min(words, function(d) { return d.size; }); 

var fontScale = d3.scale.linear().domain([minSize, maxSize]).range([10,70]); 

var fill = d3.scale.category20(); 
d3.layout.cloud().size([width, height]).words(words).font("Impact") 
.fontSize(function(d) { return fontScale(d.size) }) 
.on("end", drawCloud).start(); 

function drawCloud(words) { 
d3.select("#wordCloud").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(" + (width/2) + "," + (height/2) +")") 
    .selectAll("text") 
    .data(words) 
    .enter().append("text") 
    .style("font-size", function(d) { return d.size + "px"; }) 
    .style("font-family", "Impact") 
    .style("fill", function(d, i) { return fill(i); }) 
    .attr("text-anchor", "middle") 
    .attr("transform", function(d) { 
     return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
    }) 
    .text(function(d) { return d.text; }); 
}

HTML代碼

<div style="margin-left:20px" id="wordCloud"></div>

來源

2017-10-14 Coder

事情是這樣mark.js工作：比如，把他們衝：

.style("fill", function(d, i) { 
    return arrayToBeHighlight.indexOf(d.text) > -1 ? "red" : fill(i); 
})

這裏是bl.ocks。這在SVG中不起作用，因爲text元素沒有背景顏色。取而代之的是，你可以通過文本元素之前插入一個rect假的吧：

texts.filter(function(d){ 
    return arrayToBeHighlight.indexOf(d.text) != -1; 
    }) 
    .each(function(d){ 
    var bbox = this.getBBox(), 
     trans = d3.select(this).attr('transform'); 
    g.insert("rect", "text") 
     .attr("transform", trans) 
     .attr("x", -bbox.width/2) 
     .attr("y", bbox.y) 
     .attr("width", bbox.width) 
     .attr("height", bbox.height) 
     .style("fill", "yellow"); 
    });

運行代碼;

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://d3js.org/d3.v3.min.js"></script> 
 
    <script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script> 
 
</head> 
 

 
<body> 
 
    <div style="margin-left:20px" id="wordCloud"></div> 
 
    <script> 
 
    var width = 750, 
 
     height = 500; 
 
    var words = [ 
 
     ["whales", 79], 
 
     ["salmon", 56], 
 
     ["Chinook", 30], 
 
     ["book", 70], 
 
     ["prey", 51] 
 
    ].map(function(d) { 
 
     return { 
 
     text: d[0], 
 
     size: d[1] 
 
     }; 
 
    }); 
 

 
    var arrayToBeHighlight = ["salmon", "prey"]; 
 

 
    maxSize = d3.max(words, function(d) { 
 
     return d.size; 
 
    }); 
 
    minSize = d3.min(words, function(d) { 
 
     return d.size; 
 
    }); 
 

 
    var fontScale = d3.scale.linear().domain([minSize, maxSize]).range([10, 70]); 
 

 
    var fill = d3.scale.category20(); 
 
    d3.layout.cloud().size([width, height]).words(words).font("Impact") 
 
     .fontSize(function(d) { 
 
     return fontScale(d.size) 
 
     }) 
 
     .on("end", drawCloud).start(); 
 

 
    function drawCloud(words) { 
 
     var g = d3.select("#wordCloud").append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height) 
 
     .append("g") 
 
     .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")"); 
 
     
 
     var texts = g.selectAll("text") 
 
     .data(words) 
 
     .enter().append("text") 
 
     .style("font-size", function(d) { 
 
      return d.size + "px"; 
 
     }) 
 
     .style("font-family", "Impact") 
 
     .style("fill", function(d, i) { 
 
      return fill(i); 
 
     }) 
 
     .attr("text-anchor", "middle") 
 
     .attr("transform", function(d) { 
 
      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
 
     }) 
 
     .text(function(d) { 
 
      return d.text; 
 
     }); 
 
     
 
     texts.filter(function(d){ 
 
     return arrayToBeHighlight.indexOf(d.text) != -1; 
 
     }) 
 
     .each(function(d){ 
 
     var bbox = this.getBBox(), 
 
      trans = d3.select(this).attr('transform'); 
 
     g.insert("rect", "text") 
 
      .attr("transform", trans) 
 
      .attr("x", -bbox.width/2) 
 
      .attr("y", bbox.y) 
 
      .attr("width", bbox.width) 
 
      .attr("height", bbox.height) 
 
      .style("fill", "yellow"); 
 
     }); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-10-15 00:03:33 Mark

真棒！非常感謝。這正是我需要:) – Coder

難道你不能使用mark.js與自定義元素'rect'？ – dude

答案取決於您對的定義以及您想如何突出顯示它們。

一種可能性是在繪製單詞時將arrayToBeHighlight數組與數據進行比較。通過創建字左右的跨度和設置背景顏色以模仿熒光筆http://bl.ocks.org/anonymous/d38d1fbb5919c04783934d430fb895c2/b42582053b03b178bb155c2bbaec5242374d051b

來源

2017-10-14 22:26:12

如何突出D3詞雲詞的數組

回答

相關問題