Fatal编程技术网
  • javascript/
  • Javascript 将D3可视化与Apache storm连接起来

Javascript 将D3可视化与Apache storm连接起来

javascript d3.js apache-storm

Javascript 将D3可视化与Apache storm连接起来,javascript,d3.js,apache-storm,Javascript,D3.js,Apache Storm,问题 有人能帮我弄清楚为什么可视化不起作用吗？我不知道如何通过ApacheStorm将来自twitter的数据连接到d3 我在做什么？ 我在做实时分析 提前谢谢 <!DOCTYPE html> <html> <body> <script type="text/javascript"> var w = 300, //width h = 300,

问题

有人能帮我弄清楚为什么可视化不起作用吗？我不知道如何通过ApacheStorm将来自twitter的数据连接到d3

我在做什么？ 我在做实时分析

提前谢谢

<!DOCTYPE html>
        <html>
          <body>
         <script type="text/javascript">
var w = 300,                        //width
h = 300,                            //height
r = 100,                            //radius



  var source = new EventSource('/stream');
  var team={};
  var sentiment={};

   source.onmessage = function (event) {
     team=event.data.split("|")[0];
     sentiment=event.data.split("|")[1];

   };
color = d3.scale.category20c();     //builtin range of colors
data = [{"label":team, "value":sentiment}
        // ,{"label":"two", "value":50},
        // {"label":"three", "value":30}
      ];

var vis = d3.select("body")
    .append("svg:svg")              //create the SVG element inside the <body>
    .data([data])                   //associate our data with the document
        .attr("width", w)           //set the width and height of our visualization (these will be attributes of the <svg> tag
        .attr("height", h)
    .append("svg:g")                //make a group to hold our pie chart
        .attr("transform", "translate(" + r + "," + r + ")")    //move the center of the pie chart from 0, 0 to radius, radius
var arc = d3.svg.arc()              //this will create <path> elements for us using arc data
    .outerRadius(r);
var pie = d3.layout.pie()           //this will create arc data for us given a list of values
    .value(function(d) { return d.value; });    //we must tell it out to access the value of each element in our data array
var arcs = vis.selectAll("g.slice")     //this selects all <g> elements with class slice (there aren't any yet)
    .data(pie)                          //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
    .enter()                            //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
        .append("svg:g")                //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
            .attr("class", "slice");    //allow us to style things in the slices (like text)
    arcs.append("svg:path")
            .attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
            .attr("d", arc);                                    //this creates the actual SVG path using the associated data (pie) with the arc drawing function
    arcs.append("svg:text")                                     //add a label to each slice
            .attr("transform", function(d) {                    //set the label's origin to the center of the arc
            //we have to make sure to set these before calling arc.centroid
            d.innerRadius = 0;
            d.outerRadius = r;
            return "translate(" + arc.centroid(d) + ")";        //this gives us a pair of coordinates like [50, 50]
        })
        .attr("text-anchor", "middle")                          //center the text on it's origin
        .text(function(d, i) { return data[i].label; });        //get the label from our original data array

             </script>
           </body>
         </html>


var w=300，//宽度
h=300，//高度
r=100，//半径
var source=neweventsource（'/stream'）；
var-team={}；
var={}；
source.onmessage=函数（事件）{
team=event.data.split（“|”）[0]；
情绪=事件.data.split（“|”）[1]；
};
颜色=d3.scale.category20c（）//内置颜色范围
数据=[{“标签”：团队，“价值”：情绪]
//，{“label”：“two”，“value”：50}，
//{“标签”：“三”，“值”：30}
];
var vis=d3。选择（“主体”）
.append（“svg:svg”）//在
.data（[data]）//将我们的数据与文档关联
.attr（“width”，w）//设置可视化的宽度和高度（这些将是标记的属性
.attr（“高度”，h）
.append（“svg:g”）//创建一个组来保存饼图
.attr（“transform”、“translate”（+r+），“+r+”）//将饼图的中心从0,0移动到radius，radius
var arc=d3.svg.arc（）//这将使用arc数据为我们创建元素
.外层（r）；
var pie=d3.layout.pie（）//这将在给定值列表的情况下为我们创建弧数据
.value（函数（d）{return d.value；}）；//我们必须告诉它才能访问数据数组中每个元素的值
var arcs=vis.selectAll（“g.slice”）//这将选择具有类slice的所有元素（还没有任何元素）
.data（pie）//关联生成的pie数据（一个弧数组，每个弧都有startAngle、endAngle和value属性）
.enter（）//这将为每个应与选择关联的“额外”数据元素创建元素。结果是为数据数组中的每个对象创建一个
.append（“svg:g”）//创建一个组来保存每个切片（我们将有一个和每个切片关联的元素）
.attr（“类”、“切片”）；//允许我们在切片中设置样式（如文本）
arcs.append（“svg:path”）
.attr（“fill”，function（d，i）{return color（i）；}）//设置要从上面定义的颜色函数中选择的每个切片的颜色
.attr（“d”，arc）；//这将使用关联数据（饼图）和arc绘图功能创建实际的SVG路径
append（“svg:text”）//为每个片段添加一个标签
.attr（“transform”，函数（d）{//将标签的原点设置为弧的中心
//我们必须确保在调用arc.centroid之前设置这些参数
d、 内半径=0；
d、 外层=r；
return“translate（“+arc.centroid（d）+”）；//这会给我们一对坐标，如[50,50]
})
.attr（“文本锚定”、“中间”）//将文本置于其原点的中心
.text（函数（d，i）{返回数据[i].label；}）；//从原始数据数组中获取标签
`

您谈论的是两种完全不同的技术，对其中一种技术感兴趣的人很可能不知道另一种技术。为了简单起见，请尝试在中间点进行拆分：您确实获得了数据吗？如果是，它是什么样子的？此外，您还有变量
团队
和
情绪
，它们在
onmessage中定义e> 回调，但在主代码中使用：因此它们在定义之前使用：这不可能是正确的。您谈论的是两种完全不同的技术，对其中一种技术感兴趣的人很可能不知道另一种技术。为简单起见，请尝试在中间点拆分：您确实获得了数据吗？如果是，它看起来是什么样子？此外，您还有es
team
和
touction
在
onmessage
回调中定义，但在主代码中使用：因此它们在定义之前使用：这不可能是正确的。