Question

我正在修改此代码https://github.com/jasondavies/d3-cloud以显示json文件中的“关键字”。

我的问题：如何连接json文件以显示关键字标签？是否可以突出显示更常见的单词（例如更大的字体）？

谢谢你们！

的index.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../lib/d3/d3.js"></script>
<script src="../d3.layout.cloud.js"></script>
<script>
var fill = d3.scale.category20();

d3.layout.cloud().size([300, 300])
  .words([
    "Hello", "world", "normally", "you", "want", "more", "words",
    "than", "this"].map(function(d) {
    return {text: d, size: 10 + Math.random() * 90};
  }))
  .padding(5)
  .rotate(function() { return ~~(Math.random() * 2) * 90; })
  .font("Impact")
  .fontSize(function(d) { return d.size; })
  .on("end", draw)
  .start();

function draw(words) {
d3.select("body").append("svg")
    .attr("width", 300)
    .attr("height", 300)
  .append("g")
    .attr("transform", "translate(150,150)")
  .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; });
 }
 </script>

pub.json

{"pub":[
    {
        "citationKey":"Smuc_HCV2012",
        "entryType":"inbook",
        "entryTags": {
            "title":"How do you connect moving dots? Insights from user studies on Dynamic Network Visualizations",
            "booktitle":"Handbook of Human Centric Visualization",
            "year":"2013",
            "pages":"623-650",
            "publisher":"Springer",
            "organization":"Springer",
            "location":"New York, USA",
            "isbn":"978-1-4614-7484-5",
            "doi":"10.1007/978-1-4614-7485-2_25",
            "type":"Awesome Reports",
            "author":"muc, Michael and Federico, Paolo and Windhager, Florian and Aigner, Wolfgang and Zenk, Lukas and Miksch, Silvia",
            "editor":"Huang, Weidong"
            "keywords":"Data Mining, KDD, Pattern Finding, Time-Oriented Data, Visual analytics"
            }
    },
    {
        "citationKey":"Schratt_2009_IKE-TR-2009-02_UmfragezuBusiness-Intelligence-Weiterbildung",
        "entryType":"incollection",
        "entryTags": {
            "title":"Umfrage zu Business-Intelligence-Weiterbildung",
            "number":"IKE-TR-2009-02",
            "year":"2009",
            "publisher":"Danube University Krems",
            "type":"Technical Reports",
            "author":"Schratt, Alexander and Aigner, Wolfgang"
            "keywords":"Data Mining, Interactive Visualization, KDD, Pattern Finding, temporal   data mining, Time-Oriented Data, Visual analytics"
            }
    }


    ]
 }

Answer 1

如何连接json文件以显示关键字标签？

在您的服务器上托管该文件。让我们在/resources/pub.json说出来。然后以d3.json为例将其传递给客户端。然后，您可以将检索到的数据用作wordcloud的输入。

d3.json('/resources/pub.json', function(error, data){

    // get words as a list of objects of the form {text: 'asdf', size: 5}
    // ie. 

    words = data.pub[0]['entryTags']['title'].split(' '); // now its a list of words in the title
    words = words.map(function(word){
        return {
          text: word,
          size: 12
        }
    }); // now it has the correct format, but this is just an example

    // then use it as input to the layout
    d3.layout.cloud().size([300, 300])
     .words(words)
     ... // etcetera

});

是否可以突出显示更常见的单词（例如更大的字体）？

是的，大小在此行中设置：

.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.. // etcetera

因此，如果您确保您的单词大小不同，例如通过计算前一次转换中的出现次数，它们会有不同的大小。

还有许多不同的方法

您可以直接在javascript中包含数据，因此您不必从服务器请求数据分别
您可以在服务器上将数据转换为正确的格式，因此您不必进行转换客户端。
您可以为云中的每个标记使用其他格式，而不是文字和大小，例如添加count和color，并在格式化中使用这些格式。

请注意，这是伪代码，可以让您前进，但它并不完整。

d3.js来自json的词云加载数据

1 个答案: