个人中心
gpt4 book ai didi

javascript - 从 elasticsearch 创建 wordcloud d3.js

转载 作者：行者123 更新时间：2023-11-29 18:09:55 26 4
gpt4 key购买 nike

我正在使用以下示例作为基础，并希望使其成为动态词云 https://github.com/jasondavies/d3-cloud 

define(['scripts/d3.v3', 'scripts/elasticsearch'], function (d3, elasticsearch) {

"use strict";
var client = new elasticsearch.Client();

client.search({
    index: 'nfl',
    size: 5,
    body: {
        // Begin query.
        query: {
            // Boolean query for matching and excluding items.
            bool: {
                must: { match: { "description": "TOUCHDOWN" }},
                must_not: { match: { "qtr": 5 }}
            }
        },
        // Aggregate on the results
        aggs: {
            touchdowns: {
                terms: {
                    field: "qtr",
                    order: { "_term" : "asc" }
                }
            }
        }
        // End query.
    }
}).then(function (resp) {
        console.log(resp);

        // D3 code goes here.
        var touchdowns = resp.aggregations.touchdowns.buckets;

        // d3 donut chart
        var width = 600,
            height = 300,
            radius = Math.min(width, height) / 2;

        var color = ['#ff7f0e', '#d62728', '#2ca02c', '#1f77b4'];

        var arc = d3.svg.arc()
            .outerRadius(radius - 60)
            .innerRadius(120);

        var pie = d3.layout.pie()
            .sort(null)
            .value(function (d) { return d.doc_count; });

        var svg = d3.select("#donut-chart").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width/1.4 + "," + height/2 + ")");

        var g = svg.selectAll(".arc")
            .data(pie(touchdowns))
            .enter()
            .append("g")
            .attr("class", "arc");

        g.append("path")
            .attr("d", arc)
            .style("fill", function (d, i) {
                return color[i];
            });

        g.append("text")
            .attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
            .attr("dy", ".35em")
            .style("text-anchor", "middle")
            .style("fill", "white")
            .text(function (d) { return d.data.key; });
});

这是来自 elasticsearch 网站的示例代码，如何与 d3 一起使用

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

这是 d3 jason davies 关于 wordcloud 的代码

如何让d3 wordcloud监听elasticsearch的数据？

最佳答案

您需要将 elasticsearch 响应数据转换为易于传递到 wordcloud 示例代码的格式，如下所示:

var data = [{
    "text": "How",
    "size": 20
}, {
    "text": "to",
    "size": 30
}, ... ]

参见:http://jsfiddle.net/henbox/RUTpJ/659/

您从 Elasticsearch 聚合中得到的响应看起来像这样:

es response

当记录 ES 响应时，您还会在控制台中看到:

}).then(function (resp) {
  console.log(resp);
  ...

因此，要操作该数据，请添加:

var data = resp.aggregations.myaggregation.buckets.map(function(d) {
  return {
    text: d.key,
    size: d.doc_count
  };
});

请注意，myaggregation 是您将定义的名称。在上面的 NFL 示例代码中，它实际上称为 touchdowns

然而，将此数据直接插入词云会导致问题。在 wordcloud 示例中，font-size 是直接根据大小确定的，但是很有可能您的 doc_count 太高了，需要按比例缩小.

为此，请尝试 D3 线性标尺。在这种情况下，它将输入值的范围缩小到 15 到 100 之间的值，可用于字体大小:

var fontsize = d3.scale.linear()
  .domain(d3.extent(data, function (d) {return d.size}))
  .range([15, 100]);

然后，代替

.style("font-size", function (d) {
  return d.size + "px";
})

使用:

.style("font-size", function (d) {
  return fontsize(d.size) + "px";
})

关于javascript - 从 elasticsearch 创建 wordcloud d3.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28401180/

26 4 0
文章推荐： android - 通过 "OnItemClick"从 sqlite 数据库中检索数据并将其显示在另一个类中
文章推荐： 安卓漏洞 : Crop intent works on some devices
文章推荐： android - 检查应用程序是否在平板电脑上运行
文章推荐： 使用 setMonth 时的 Javascript 日期问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com