Related
I have a scenario where a flowfile contains the json transformed, I need to now combine fields that are in the json, for example, I want to get the R and PA from the Original.ScoreInfo.Team per ID and get Enriched.Team.Source.HV and Enriched.Team.SourceMapped.HV based on the Team.ID. My desired json looks like:
[{
TeamID: 1000,
ValueR: 3,
ValuePA: 13},
{
TeamID: 2000,
ValueR: 1,
ValuePA: 14}
]
Flowfile example:
[
{
"Mapping": {
"ScoreInfo": {
"Team": [
{
"ID": 1,
"Source": {
"HV": 1,
"ID": 1
}
},
{
"ID": 3,
"Source": {
"HV": 2,
"ID": 3
}
}
]
}
},
"Original": {
"ScoreInfo": {
"Team": [
{
"HV": 1,
"ID": 1,
"R": 1,
"PA": 8,
"H": 2,
"BB": 2,
"SB": 0,
"E": 0,
"Score": [
{
"Inn": 1,
"TB": 2,
"R": 0,
"H": 0,
"BB": 1
},
{
"Inn": 2,
"TB": 2,
"R": 1,
"H": 2,
"BB": 1
}
]
},
{
"HV": 2,
"ID": 3,
"R": 1,
"PA": 10,
"H": 3,
"BB": 0,
"SB": 0,
"E": 0,
"Score": [
{
"Inn": 1,
"TB": 1,
"R": 1,
"H": 2,
"BB": 0
},
{
"Inn": 2,
"TB": 1,
"R": 0,
"H": 0,
"BB": 0
}
]
}
]
}
},
"MatchValue": "99999999",
"Enriched": {
"Team": [
{
"ID": 1,
"Source": {
"HV": 1,
"ID": 1
},
"SourceMapped": {
"HV": 1000,
"ID": 1000
}
},
{
"ID": 2,
"Source": {
"HV": 2,
"ID": 2
},
"SourceMapped": {
"HV": 2000,
"ID": 2000
}
}
],
"MatchValue": "99999999"
}
}
]
I was trying to do it using the QueryRecord and combined with the RPATH but it is returning empty when try this SELECT * FROM FLOWFILE WHERE RPATH(Original, '/ScoreInfo/Team/ID') = RPATH(Enriched, '/Team/ID')
Any idea how can I use the QueryRecord to do it?
I am trying to create a force graph in d3.js with some labels on top of each node and also some content-dependent style (for instance, the colour of the node is dependent on a 'type' property). I am starting with one of the examples but I cannot make the graph to display new data when I update it. For instance, when changing the text property on the list of data, the label on the node should change, however it does not. I think the problem might be in the data()/enter() procedure, which I am still trying to fully understand. What I have so far managed to get is the following: https://jsfiddle.net/5Luv0btd/2/ . Any help would be much appreciated!
That is because once you've entered the data, you do not have to operate on the nodeEnter anymore. The reason is simple: .enter() merges into the update selection when you append or insert.. In other words, after chaining .enter(), node effectively refers to both the old and new data. Citing the example for the v3.x documentation for d3:
var update_sel = svg.selectAll("circle").data(data)
update_sel.attr(/* operate on old elements only */)
update_sel.enter().append("circle").attr(/* operate on new elements only */)
update_sel.attr(/* operate on old and new elements */)
update_sel.exit().remove() /* complete the enter-update-exit pattern */
Therefore, working with node itself will suffice, i.e.:
// Enter selection
node.enter().append("g")
.attr("class", "node")
.call(drag);
// From this point onwards:
// `node` will refer to both old and new data
// Do magic ;)
node.append("circle")
.attr("r", 10)
.style('fill', function(d) {
return color(d.type)
})
.attr("width", 16)
.attr("height", 16);
node.append("text")
.attr("dx", 0)
.attr("dy", ".35em")
.text(function(d) {
return d.name
})
.attr("text-anchor", "middle");
See working fiddle here: https://jsfiddle.net/teddyrised/5Luv0btd/5/, or refer to the code snippet below:
var data = {
"nodes": [{
"name": "Myriel",
"type": 1
}, {
"name": "Napoleon",
"type": 1
}, {
"name": "Mlle.Baptistine",
"type": 1
}, {
"name": "Mme.Magloire",
"type": 1
}, {
"name": "CountessdeLo",
"type": 1
}, {
"name": "Geborand",
"type": 1
}, {
"name": "Champtercier",
"type": 1
}, {
"name": "Cravatte",
"type": 1
}, {
"name": "Count",
"type": 1
}, {
"name": "OldMan",
"type": 1
}, {
"name": "Labarre",
"type": 2
}, {
"name": "Valjean",
"type": 2
}, {
"name": "Marguerite",
"type": 3
}, {
"name": "Mme.deR",
"type": 2
}, {
"name": "Isabeau",
"type": 2
}, {
"name": "Gervais",
"type": 2
}, {
"name": "Tholomyes",
"type": 3
}, {
"name": "Listolier",
"type": 3
}, {
"name": "Fameuil",
"type": 3
}, {
"name": "Blacheville",
"type": 3
}, {
"name": "Favourite",
"type": 3
}, {
"name": "Dahlia",
"type": 3
}, {
"name": "Zephine",
"type": 3
}, {
"name": "Fantine",
"type": 3
}, {
"name": "Mme.Thenardier",
"type": 4
}, {
"name": "Thenardier",
"type": 4
}, {
"name": "Cosette",
"type": 5
}, {
"name": "Javert",
"type": 4
}, {
"name": "Fauchelevent",
"type": 0
}, {
"name": "Bamatabois",
"type": 2
}, {
"name": "Perpetue",
"type": 3
}, {
"name": "Simplice",
"type": 2
}, {
"name": "Scaufflaire",
"type": 2
}, {
"name": "Woman1",
"type": 2
}, {
"name": "Judge",
"type": 2
}, {
"name": "Champmathieu",
"type": 2
}, {
"name": "Brevet",
"type": 2
}, {
"name": "Chenildieu",
"type": 2
}, {
"name": "Cochepaille",
"type": 2
}, {
"name": "Pontmercy",
"type": 4
}, {
"name": "Boulatruelle",
"type": 6
}, {
"name": "Eponine",
"type": 4
}, {
"name": "Anzelma",
"type": 4
}, {
"name": "Woman2",
"type": 5
}, {
"name": "MotherInnocent",
"type": 0
}, {
"name": "Gribier",
"type": 0
}, {
"name": "Jondrette",
"type": 7
}, {
"name": "Mme.Burgon",
"type": 7
}, {
"name": "Gavroche",
"type": 8
}, {
"name": "Gillenormand",
"type": 5
}, {
"name": "Magnon",
"type": 5
}, {
"name": "Mlle.Gillenormand",
"type": 5
}, {
"name": "Mme.Pontmercy",
"type": 5
}, {
"name": "Mlle.Vaubois",
"type": 5
}, {
"name": "Lt.Gillenormand",
"type": 5
}, {
"name": "Marius",
"type": 8
}, {
"name": "BaronessT",
"type": 5
}, {
"name": "Mabeuf",
"type": 8
}, {
"name": "Enjolras",
"type": 8
}, {
"name": "Combeferre",
"type": 8
}, {
"name": "Prouvaire",
"type": 8
}, {
"name": "Feuilly",
"type": 8
}, {
"name": "Courfeyrac",
"type": 8
}, {
"name": "Bahorel",
"type": 8
}, {
"name": "Bossuet",
"type": 8
}, {
"name": "Joly",
"type": 8
}, {
"name": "Grantaire",
"type": 8
}, {
"name": "MotherPlutarch",
"type": 9
}, {
"name": "Gueulemer",
"type": 4
}, {
"name": "Babet",
"type": 4
}, {
"name": "Claquesous",
"type": 4
}, {
"name": "Montparnasse",
"type": 4
}, {
"name": "Toussaint",
"type": 5
}, {
"name": "Child1",
"type": 10
}, {
"name": "Child2",
"type": 10
}, {
"name": "Brujon",
"type": 4
}, {
"name": "Mme.Hucheloup",
"type": 8
}],
"links": [{
"source": 1,
"target": 0,
"value": 1
}, {
"source": 2,
"target": 0,
"value": 8
}, {
"source": 3,
"target": 0,
"value": 10
}, {
"source": 3,
"target": 2,
"value": 6
}, {
"source": 4,
"target": 0,
"value": 1
}, {
"source": 5,
"target": 0,
"value": 1
}, {
"source": 6,
"target": 0,
"value": 1
}, {
"source": 7,
"target": 0,
"value": 1
}, {
"source": 8,
"target": 0,
"value": 2
}, {
"source": 9,
"target": 0,
"value": 1
}, {
"source": 11,
"target": 10,
"value": 1
}, {
"source": 11,
"target": 3,
"value": 3
}, {
"source": 11,
"target": 2,
"value": 3
}, {
"source": 11,
"target": 0,
"value": 5
}, {
"source": 12,
"target": 11,
"value": 1
}, {
"source": 13,
"target": 11,
"value": 1
}, {
"source": 14,
"target": 11,
"value": 1
}, {
"source": 15,
"target": 11,
"value": 1
}, {
"source": 17,
"target": 16,
"value": 4
}, {
"source": 18,
"target": 16,
"value": 4
}, {
"source": 18,
"target": 17,
"value": 4
}, {
"source": 19,
"target": 16,
"value": 4
}, {
"source": 19,
"target": 17,
"value": 4
}, {
"source": 19,
"target": 18,
"value": 4
}, {
"source": 20,
"target": 16,
"value": 3
}, {
"source": 20,
"target": 17,
"value": 3
}, {
"source": 20,
"target": 18,
"value": 3
}, {
"source": 20,
"target": 19,
"value": 4
}, {
"source": 21,
"target": 16,
"value": 3
}, {
"source": 21,
"target": 17,
"value": 3
}, {
"source": 21,
"target": 18,
"value": 3
}, {
"source": 21,
"target": 19,
"value": 3
}, {
"source": 21,
"target": 20,
"value": 5
}, {
"source": 22,
"target": 16,
"value": 3
}, {
"source": 22,
"target": 17,
"value": 3
}, {
"source": 22,
"target": 18,
"value": 3
}, {
"source": 22,
"target": 19,
"value": 3
}, {
"source": 22,
"target": 20,
"value": 4
}, {
"source": 22,
"target": 21,
"value": 4
}, {
"source": 23,
"target": 16,
"value": 3
}, {
"source": 23,
"target": 17,
"value": 3
}, {
"source": 23,
"target": 18,
"value": 3
}, {
"source": 23,
"target": 19,
"value": 3
}, {
"source": 23,
"target": 20,
"value": 4
}, {
"source": 23,
"target": 21,
"value": 4
}, {
"source": 23,
"target": 22,
"value": 4
}, {
"source": 23,
"target": 12,
"value": 2
}, {
"source": 23,
"target": 11,
"value": 9
}, {
"source": 24,
"target": 23,
"value": 2
}, {
"source": 24,
"target": 11,
"value": 7
}, {
"source": 25,
"target": 24,
"value": 13
}, {
"source": 25,
"target": 23,
"value": 1
}, {
"source": 25,
"target": 11,
"value": 12
}, {
"source": 26,
"target": 24,
"value": 4
}, {
"source": 26,
"target": 11,
"value": 31
}, {
"source": 26,
"target": 16,
"value": 1
}, {
"source": 26,
"target": 25,
"value": 1
}, {
"source": 27,
"target": 11,
"value": 17
}, {
"source": 27,
"target": 23,
"value": 5
}, {
"source": 27,
"target": 25,
"value": 5
}, {
"source": 27,
"target": 24,
"value": 1
}, {
"source": 27,
"target": 26,
"value": 1
}, {
"source": 28,
"target": 11,
"value": 8
}, {
"source": 28,
"target": 27,
"value": 1
}, {
"source": 29,
"target": 23,
"value": 1
}, {
"source": 29,
"target": 27,
"value": 1
}, {
"source": 29,
"target": 11,
"value": 2
}, {
"source": 30,
"target": 23,
"value": 1
}, {
"source": 31,
"target": 30,
"value": 2
}, {
"source": 31,
"target": 11,
"value": 3
}, {
"source": 31,
"target": 23,
"value": 2
}, {
"source": 31,
"target": 27,
"value": 1
}, {
"source": 32,
"target": 11,
"value": 1
}, {
"source": 33,
"target": 11,
"value": 2
}, {
"source": 33,
"target": 27,
"value": 1
}, {
"source": 34,
"target": 11,
"value": 3
}, {
"source": 34,
"target": 29,
"value": 2
}, {
"source": 35,
"target": 11,
"value": 3
}, {
"source": 35,
"target": 34,
"value": 3
}, {
"source": 35,
"target": 29,
"value": 2
}, {
"source": 36,
"target": 34,
"value": 2
}, {
"source": 36,
"target": 35,
"value": 2
}, {
"source": 36,
"target": 11,
"value": 2
}, {
"source": 36,
"target": 29,
"value": 1
}, {
"source": 37,
"target": 34,
"value": 2
}, {
"source": 37,
"target": 35,
"value": 2
}, {
"source": 37,
"target": 36,
"value": 2
}, {
"source": 37,
"target": 11,
"value": 2
}, {
"source": 37,
"target": 29,
"value": 1
}, {
"source": 38,
"target": 34,
"value": 2
}, {
"source": 38,
"target": 35,
"value": 2
}, {
"source": 38,
"target": 36,
"value": 2
}, {
"source": 38,
"target": 37,
"value": 2
}, {
"source": 38,
"target": 11,
"value": 2
}, {
"source": 38,
"target": 29,
"value": 1
}, {
"source": 39,
"target": 25,
"value": 1
}, {
"source": 40,
"target": 25,
"value": 1
}, {
"source": 41,
"target": 24,
"value": 2
}, {
"source": 41,
"target": 25,
"value": 3
}, {
"source": 42,
"target": 41,
"value": 2
}, {
"source": 42,
"target": 25,
"value": 2
}, {
"source": 42,
"target": 24,
"value": 1
}, {
"source": 43,
"target": 11,
"value": 3
}, {
"source": 43,
"target": 26,
"value": 1
}, {
"source": 43,
"target": 27,
"value": 1
}, {
"source": 44,
"target": 28,
"value": 3
}, {
"source": 44,
"target": 11,
"value": 1
}, {
"source": 45,
"target": 28,
"value": 2
}, {
"source": 47,
"target": 46,
"value": 1
}, {
"source": 48,
"target": 47,
"value": 2
}, {
"source": 48,
"target": 25,
"value": 1
}, {
"source": 48,
"target": 27,
"value": 1
}, {
"source": 48,
"target": 11,
"value": 1
}, {
"source": 49,
"target": 26,
"value": 3
}, {
"source": 49,
"target": 11,
"value": 2
}, {
"source": 50,
"target": 49,
"value": 1
}, {
"source": 50,
"target": 24,
"value": 1
}, {
"source": 51,
"target": 49,
"value": 9
}, {
"source": 51,
"target": 26,
"value": 2
}, {
"source": 51,
"target": 11,
"value": 2
}, {
"source": 52,
"target": 51,
"value": 1
}, {
"source": 52,
"target": 39,
"value": 1
}, {
"source": 53,
"target": 51,
"value": 1
}, {
"source": 54,
"target": 51,
"value": 2
}, {
"source": 54,
"target": 49,
"value": 1
}, {
"source": 54,
"target": 26,
"value": 1
}, {
"source": 55,
"target": 51,
"value": 6
}, {
"source": 55,
"target": 49,
"value": 12
}, {
"source": 55,
"target": 39,
"value": 1
}, {
"source": 55,
"target": 54,
"value": 1
}, {
"source": 55,
"target": 26,
"value": 21
}, {
"source": 55,
"target": 11,
"value": 19
}, {
"source": 55,
"target": 16,
"value": 1
}, {
"source": 55,
"target": 25,
"value": 2
}, {
"source": 55,
"target": 41,
"value": 5
}, {
"source": 55,
"target": 48,
"value": 4
}, {
"source": 56,
"target": 49,
"value": 1
}, {
"source": 56,
"target": 55,
"value": 1
}, {
"source": 57,
"target": 55,
"value": 1
}, {
"source": 57,
"target": 41,
"value": 1
}, {
"source": 57,
"target": 48,
"value": 1
}, {
"source": 58,
"target": 55,
"value": 7
}, {
"source": 58,
"target": 48,
"value": 7
}, {
"source": 58,
"target": 27,
"value": 6
}, {
"source": 58,
"target": 57,
"value": 1
}, {
"source": 58,
"target": 11,
"value": 4
}, {
"source": 59,
"target": 58,
"value": 15
}, {
"source": 59,
"target": 55,
"value": 5
}, {
"source": 59,
"target": 48,
"value": 6
}, {
"source": 59,
"target": 57,
"value": 2
}, {
"source": 60,
"target": 48,
"value": 1
}, {
"source": 60,
"target": 58,
"value": 4
}, {
"source": 60,
"target": 59,
"value": 2
}, {
"source": 61,
"target": 48,
"value": 2
}, {
"source": 61,
"target": 58,
"value": 6
}, {
"source": 61,
"target": 60,
"value": 2
}, {
"source": 61,
"target": 59,
"value": 5
}, {
"source": 61,
"target": 57,
"value": 1
}, {
"source": 61,
"target": 55,
"value": 1
}, {
"source": 62,
"target": 55,
"value": 9
}, {
"source": 62,
"target": 58,
"value": 17
}, {
"source": 62,
"target": 59,
"value": 13
}, {
"source": 62,
"target": 48,
"value": 7
}, {
"source": 62,
"target": 57,
"value": 2
}, {
"source": 62,
"target": 41,
"value": 1
}, {
"source": 62,
"target": 61,
"value": 6
}, {
"source": 62,
"target": 60,
"value": 3
}, {
"source": 63,
"target": 59,
"value": 5
}, {
"source": 63,
"target": 48,
"value": 5
}, {
"source": 63,
"target": 62,
"value": 6
}, {
"source": 63,
"target": 57,
"value": 2
}, {
"source": 63,
"target": 58,
"value": 4
}, {
"source": 63,
"target": 61,
"value": 3
}, {
"source": 63,
"target": 60,
"value": 2
}, {
"source": 63,
"target": 55,
"value": 1
}, {
"source": 64,
"target": 55,
"value": 5
}, {
"source": 64,
"target": 62,
"value": 12
}, {
"source": 64,
"target": 48,
"value": 5
}, {
"source": 64,
"target": 63,
"value": 4
}, {
"source": 64,
"target": 58,
"value": 10
}, {
"source": 64,
"target": 61,
"value": 6
}, {
"source": 64,
"target": 60,
"value": 2
}, {
"source": 64,
"target": 59,
"value": 9
}, {
"source": 64,
"target": 57,
"value": 1
}, {
"source": 64,
"target": 11,
"value": 1
}, {
"source": 65,
"target": 63,
"value": 5
}, {
"source": 65,
"target": 64,
"value": 7
}, {
"source": 65,
"target": 48,
"value": 3
}, {
"source": 65,
"target": 62,
"value": 5
}, {
"source": 65,
"target": 58,
"value": 5
}, {
"source": 65,
"target": 61,
"value": 5
}, {
"source": 65,
"target": 60,
"value": 2
}, {
"source": 65,
"target": 59,
"value": 5
}, {
"source": 65,
"target": 57,
"value": 1
}, {
"source": 65,
"target": 55,
"value": 2
}, {
"source": 66,
"target": 64,
"value": 3
}, {
"source": 66,
"target": 58,
"value": 3
}, {
"source": 66,
"target": 59,
"value": 1
}, {
"source": 66,
"target": 62,
"value": 2
}, {
"source": 66,
"target": 65,
"value": 2
}, {
"source": 66,
"target": 48,
"value": 1
}, {
"source": 66,
"target": 63,
"value": 1
}, {
"source": 66,
"target": 61,
"value": 1
}, {
"source": 66,
"target": 60,
"value": 1
}, {
"source": 67,
"target": 57,
"value": 3
}, {
"source": 68,
"target": 25,
"value": 5
}, {
"source": 68,
"target": 11,
"value": 1
}, {
"source": 68,
"target": 24,
"value": 1
}, {
"source": 68,
"target": 27,
"value": 1
}, {
"source": 68,
"target": 48,
"value": 1
}, {
"source": 68,
"target": 41,
"value": 1
}, {
"source": 69,
"target": 25,
"value": 6
}, {
"source": 69,
"target": 68,
"value": 6
}, {
"source": 69,
"target": 11,
"value": 1
}, {
"source": 69,
"target": 24,
"value": 1
}, {
"source": 69,
"target": 27,
"value": 2
}, {
"source": 69,
"target": 48,
"value": 1
}, {
"source": 69,
"target": 41,
"value": 1
}, {
"source": 70,
"target": 25,
"value": 4
}, {
"source": 70,
"target": 69,
"value": 4
}, {
"source": 70,
"target": 68,
"value": 4
}, {
"source": 70,
"target": 11,
"value": 1
}, {
"source": 70,
"target": 24,
"value": 1
}, {
"source": 70,
"target": 27,
"value": 1
}, {
"source": 70,
"target": 41,
"value": 1
}, {
"source": 70,
"target": 58,
"value": 1
}, {
"source": 71,
"target": 27,
"value": 1
}, {
"source": 71,
"target": 69,
"value": 2
}, {
"source": 71,
"target": 68,
"value": 2
}, {
"source": 71,
"target": 70,
"value": 2
}, {
"source": 71,
"target": 11,
"value": 1
}, {
"source": 71,
"target": 48,
"value": 1
}, {
"source": 71,
"target": 41,
"value": 1
}, {
"source": 71,
"target": 25,
"value": 1
}, {
"source": 72,
"target": 26,
"value": 2
}, {
"source": 72,
"target": 27,
"value": 1
}, {
"source": 72,
"target": 11,
"value": 1
}, {
"source": 73,
"target": 48,
"value": 2
}, {
"source": 74,
"target": 48,
"value": 2
}, {
"source": 74,
"target": 73,
"value": 3
}, {
"source": 75,
"target": 69,
"value": 3
}, {
"source": 75,
"target": 68,
"value": 3
}, {
"source": 75,
"target": 25,
"value": 3
}, {
"source": 75,
"target": 48,
"value": 1
}, {
"source": 75,
"target": 41,
"value": 1
}, {
"source": 75,
"target": 70,
"value": 1
}, {
"source": 75,
"target": 71,
"value": 1
}, {
"source": 76,
"target": 64,
"value": 1
}, {
"source": 76,
"target": 65,
"value": 1
}, {
"source": 76,
"target": 66,
"value": 1
}, {
"source": 76,
"target": 63,
"value": 1
}, {
"source": 76,
"target": 62,
"value": 1
}, {
"source": 76,
"target": 48,
"value": 1
}, {
"source": 76,
"target": 58,
"value": 1
}]
};
var width = 960,
height = 500,
color = d3.scale.category20();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.gravity(0.05)
.distance(100)
.charge(-100)
.size([width, height]);
var draw = function(data) {
force
.nodes(data.nodes)
.links(data.links)
.start();
var drag = d3.behavior.drag().origin(function(d) {
return d;
});
var link = svg.selectAll(".link")
.data(data.links);
var linkEnter = link.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(data.nodes, function(d) {
return d.name
});
node.enter().append("g")
.attr("class", "node")
.call(drag);
node.append("circle")
.attr("r", 10)
.style('fill', function(d) {
return color(d.type)
})
.attr("width", 16)
.attr("height", 16);
node.append("text")
.attr("dx", 0)
.attr("dy", ".35em")
.text(function(d) {
return d.name
})
.attr("text-anchor", "middle");
link.exit().remove();
node.exit().remove();
force.on("tick", function() {
link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
}
draw(data);
setTimeout(function(d) {
data.nodes[0].name = "A changed name";
data.nodes[0].type = 2;
// The node 'Myriel' should now have the labed 'A changed name'
draw(data)
}, 2000);
.link {
stroke: #ccc;
}
.node text {
pointer-events: none;
font: 10px sans-serif;
}
<script src="//d3js.org/d3.v3.min.js"></script>
This question already has answers here:
Placing labels at the center of nodes in d3.js
(3 answers)
Closed 7 years ago.
Here is the code to draw to text in the center of the circle.
node.append("text")
.attr("dx", 10)
.attr("dy", ".35em")
.text(function(d) { return d.group });
Here is the jsfiddle
Just set text-anchor attribute middle to the text element. This code would work even for nodes having different size.
node.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".35em")
.text(function(d) { return d.group });
Working snippet:
var width = 500,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(80)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var mis = document.getElementById('mis').innerHTML;
graph = JSON.parse(mis);
force.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) {
return Math.sqrt(d.value);
});
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", function(d,i){ return i%2==0?10:8 })
.style("fill", function(d) {
return color(d.group);
})
node.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".35em")
.text(function(d) {
return d.group
});
force.on("tick", function() {
link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
d3.selectAll("circle").attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
d3.selectAll("text").attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y;
});
});
.link {
stroke: #ccc;
}
.node text {
pointer-events: none;
font: 10px sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script type="application/json" id="mis">
{ "nodes": [{ "name": "Myriel", "group": 1 }, { "name": "Napoleon", "group": 1 }, { "name": "Mlle.Baptistine", "group": 1 }, { "name": "Mme.Magloire", "group": 1 }, { "name": "CountessdeLo", "group": 1 }, { "name": "Geborand", "group": 1 }, { "name": "Champtercier", "group": 1 }, { "name": "Cravatte", "group": 1 }, { "name": "Count", "group": 1 }, { "name": "OldMan", "group": 1 }, { "name": "Labarre", "group": 2 }, { "name": "Valjean", "group": 2 }, { "name": "Marguerite", "group": 3 }, { "name": "Mme.deR", "group": 2 }, { "name": "Isabeau", "group": 2 }, { "name": "Gervais", "group": 2 }, { "name": "Tholomyes", "group": 3 }, { "name": "Listolier", "group": 3 }, { "name": "Fameuil", "group": 3 }, { "name": "Blacheville", "group": 3 }, { "name": "Favourite", "group": 3 }, { "name": "Dahlia", "group": 3 }, { "name": "Zephine", "group": 3 }, { "name": "Fantine", "group": 3 }, { "name": "Mme.Thenardier", "group": 4 }, { "name": "Thenardier", "group": 4 }, { "name": "Cosette", "group": 5 }, { "name": "Javert", "group": 4 }, { "name": "Fauchelevent", "group": 0 }, { "name": "Bamatabois", "group": 2 }, { "name": "Perpetue", "group": 3 }, { "name": "Simplice", "group": 2 }, { "name": "Scaufflaire", "group": 2 }, { "name": "Woman1", "group": 2 }, { "name": "Judge", "group": 2 }, { "name": "Champmathieu", "group": 2 }, { "name": "Brevet", "group": 2 }, { "name": "Chenildieu", "group": 2 }, { "name": "Cochepaille", "group": 2 }, { "name": "Pontmercy", "group": 4 }, { "name": "Boulatruelle", "group": 6 }, { "name": "Eponine", "group": 4 }, { "name": "Anzelma", "group": 4 }, { "name": "Woman2", "group": 5 }, { "name": "MotherInnocent", "group": 0 }, { "name": "Gribier", "group": 0 }, { "name": "Jondrette", "group": 7 }, { "name": "Mme.Burgon", "group": 7 }, { "name": "Gavroche", "group": 8 }, { "name": "Gillenormand", "group": 5 }, { "name": "Magnon", "group": 5 }, { "name": "Mlle.Gillenormand", "group": 5 }, { "name": "Mme.Pontmercy", "group": 5 }, { "name": "Mlle.Vaubois", "group": 5 }, { "name": "Lt.Gillenormand", "group": 5 }, { "name": "Marius", "group": 8 }, { "name": "BaronessT", "group": 5 }, { "name": "Mabeuf", "group": 8 }, { "name": "Enjolras", "group": 8 }, { "name": "Combeferre", "group": 8 }, { "name": "Prouvaire", "group": 8 }, { "name": "Feuilly", "group": 8 }, { "name": "Courfeyrac", "group": 8 }, { "name": "Bahorel", "group": 8 }, { "name": "Bossuet", "group": 8 }, { "name": "Joly", "group": 8 }, { "name": "Grantaire", "group": 8 }, { "name": "MotherPlutarch", "group": 9 }, { "name": "Gueulemer", "group": 4 }, { "name": "Babet", "group": 4 }, { "name": "Claquesous", "group": 4 }, { "name": "Montparnasse", "group": 4 }, { "name": "Toussaint", "group": 5 }, { "name": "Child1", "group": 10 }, { "name": "Child2", "group": 10 }, { "name": "Brujon", "group": 4 }, { "name": "Mme.Hucheloup", "group": 8 }], "links": [{ "source": 1, "target": 0, "value": 1 }, { "source": 2, "target": 0, "value": 8 }, { "source": 3, "target": 0, "value": 10 }, { "source": 3, "target": 2, "value": 6 }, { "source": 4, "target": 0, "value": 1 }, { "source": 5, "target": 0, "value": 1 }, { "source": 6, "target": 0, "value": 1 }, { "source": 7, "target": 0, "value": 1 }, { "source": 8, "target": 0, "value": 2 }, { "source": 9, "target": 0, "value": 1 }, { "source": 11, "target": 10, "value": 1 }, { "source": 11, "target": 3, "value": 3 }, { "source": 11, "target": 2, "value": 3 }, { "source": 11, "target": 0, "value": 5 }, { "source": 12, "target": 11, "value": 1 }, { "source": 13, "target": 11, "value": 1 }, { "source": 14, "target": 11, "value": 1 }, { "source": 15, "target": 11, "value": 1 }, { "source": 17, "target": 16, "value": 4 }, { "source": 18, "target": 16, "value": 4 }, { "source": 18, "target": 17, "value": 4 }, { "source": 19, "target": 16, "value": 4 }, { "source": 19, "target": 17, "value": 4 }, { "source": 19, "target": 18, "value": 4 }, { "source": 20, "target": 16, "value": 3 }, { "source": 20, "target": 17, "value": 3 }, { "source": 20, "target": 18, "value": 3 }, { "source": 20, "target": 19, "value": 4 }, { "source": 21, "target": 16, "value": 3 }, { "source": 21, "target": 17, "value": 3 }, { "source": 21, "target": 18, "value": 3 }, { "source": 21, "target": 19, "value": 3 }, { "source": 21, "target": 20, "value": 5 }, { "source": 22, "target": 16, "value": 3 }, { "source": 22, "target": 17, "value": 3 }, { "source": 22, "target": 18, "value": 3 }, { "source": 22, "target": 19, "value": 3 }, { "source": 22, "target": 20, "value": 4 }, { "source": 22, "target": 21, "value": 4 }, { "source": 23, "target": 16, "value": 3 }, { "source": 23, "target": 17, "value": 3 }, { "source": 23, "target": 18, "value": 3 }, { "source": 23, "target": 19, "value": 3 }, { "source": 23, "target": 20, "value": 4 }, { "source": 23, "target": 21, "value": 4 }, { "source": 23, "target": 22, "value": 4 }, { "source": 23, "target": 12, "value": 2 }, { "source": 23, "target": 11, "value": 9 }, { "source": 24, "target": 23, "value": 2 }, { "source": 24, "target": 11, "value": 7 }, { "source": 25, "target": 24, "value": 13 }, { "source": 25, "target": 23, "value": 1 }, { "source": 25, "target": 11, "value": 12 }, { "source": 26, "target": 24, "value": 4 }, { "source": 26, "target": 11, "value": 31 }, { "source": 26, "target": 16, "value": 1 }, { "source": 26, "target": 25, "value": 1 }, { "source": 27, "target": 11, "value": 17 }, { "source": 27, "target": 23, "value": 5 }, { "source": 27, "target": 25, "value": 5 }, { "source": 27, "target": 24, "value": 1 }, { "source": 27, "target": 26, "value": 1 }, { "source": 28, "target": 11, "value": 8 }, { "source": 28, "target": 27, "value": 1 }, { "source": 29, "target": 23, "value": 1 }, { "source": 29, "target": 27, "value": 1 }, { "source": 29, "target": 11, "value": 2 }, { "source": 30, "target": 23, "value": 1 }, { "source": 31, "target": 30, "value": 2 }, { "source": 31, "target": 11, "value": 3 }, { "source": 31, "target": 23, "value": 2 }, { "source": 31, "target": 27, "value": 1 }, { "source": 32, "target": 11, "value": 1 }, { "source": 33, "target": 11, "value": 2 }, { "source": 33, "target": 27, "value": 1 }, { "source": 34, "target": 11, "value": 3 }, { "source": 34, "target": 29, "value": 2 }, { "source": 35, "target": 11, "value": 3 }, { "source": 35, "target": 34, "value": 3 }, { "source": 35, "target": 29, "value": 2 }, { "source": 36, "target": 34, "value": 2 }, { "source": 36, "target": 35, "value": 2 }, { "source": 36, "target": 11, "value": 2 }, { "source": 36, "target": 29, "value": 1 }, { "source": 37, "target": 34, "value": 2 }, { "source": 37, "target": 35, "value": 2 }, { "source": 37, "target": 36, "value": 2 }, { "source": 37, "target": 11, "value": 2 }, { "source": 37, "target": 29, "value": 1 }, { "source": 38, "target": 34, "value": 2 }, { "source": 38, "target": 35, "value": 2 }, { "source": 38, "target": 36, "value": 2 }, { "source": 38, "target": 37, "value": 2 }, { "source": 38, "target": 11, "value": 2 }, { "source": 38, "target": 29, "value": 1 }, { "source": 39, "target": 25, "value": 1 }, { "source": 40, "target": 25, "value": 1 }, { "source": 41, "target": 24, "value": 2 }, { "source": 41, "target": 25, "value": 3 }, { "source": 42, "target": 41, "value": 2 }, { "source": 42, "target": 25, "value": 2 }, { "source": 42, "target": 24, "value": 1 }, { "source": 43, "target": 11, "value": 3 }, { "source": 43, "target": 26, "value": 1 }, { "source": 43, "target": 27, "value": 1 }, { "source": 44, "target": 28, "value": 3 }, { "source": 44, "target": 11, "value": 1 }, { "source": 45, "target": 28, "value": 2 }, { "source": 47, "target": 46, "value": 1 }, { "source": 48, "target": 47, "value": 2 }, { "source": 48, "target": 25, "value": 1 }, { "source": 48, "target": 27, "value": 1 }, { "source": 48, "target": 11, "value": 1 }, { "source": 49, "target": 26, "value": 3 }, { "source": 49, "target": 11, "value": 2 }, { "source": 50, "target": 49, "value": 1 }, { "source": 50, "target": 24, "value": 1 }, { "source": 51, "target": 49, "value": 9 }, { "source": 51, "target": 26, "value": 2 }, { "source": 51, "target": 11, "value": 2 }, { "source": 52, "target": 51, "value": 1 }, { "source": 52, "target": 39, "value": 1 }, { "source": 53, "target": 51, "value": 1 }, { "source": 54, "target": 51, "value": 2 }, { "source": 54, "target": 49, "value": 1 }, { "source": 54, "target": 26, "value": 1 }, { "source": 55, "target": 51, "value": 6 }, { "source": 55, "target": 49, "value": 12 }, { "source": 55, "target": 39, "value": 1 }, { "source": 55, "target": 54, "value": 1 }, { "source": 55, "target": 26, "value": 21 }, { "source": 55, "target": 11, "value": 19 }, { "source": 55, "target": 16, "value": 1 }, { "source": 55, "target": 25, "value": 2 }, { "source": 55, "target": 41, "value": 5 }, { "source": 55, "target": 48, "value": 4 }, { "source": 56, "target": 49, "value": 1 }, { "source": 56, "target": 55, "value": 1 }, { "source": 57, "target": 55, "value": 1 }, { "source": 57, "target": 41, "value": 1 }, { "source": 57, "target": 48, "value": 1 }, { "source": 58, "target": 55, "value": 7 }, { "source": 58, "target": 48, "value": 7 }, { "source": 58, "target": 27, "value": 6 }, { "source": 58, "target": 57, "value": 1 }, { "source": 58, "target": 11, "value": 4 }, { "source": 59, "target": 58, "value": 15 }, { "source": 59, "target": 55, "value": 5 }, { "source": 59, "target": 48, "value": 6 }, { "source": 59, "target": 57, "value": 2 }, { "source": 60, "target": 48, "value": 1 }, { "source": 60, "target": 58, "value": 4 }, { "source": 60, "target": 59, "value": 2 }, { "source": 61, "target": 48, "value": 2 }, { "source": 61, "target": 58, "value": 6 }, { "source": 61, "target": 60, "value": 2 }, { "source": 61, "target": 59, "value": 5 }, { "source": 61, "target": 57, "value": 1 }, { "source": 61, "target": 55, "value": 1 }, { "source": 62, "target": 55, "value": 9 }, { "source": 62, "target": 58, "value": 17 }, { "source": 62, "target": 59, "value": 13 }, { "source": 62, "target": 48, "value": 7 }, { "source": 62, "target": 57, "value": 2 }, { "source": 62, "target": 41, "value": 1 }, { "source": 62, "target": 61, "value": 6 }, { "source": 62, "target": 60, "value": 3 }, { "source": 63, "target": 59, "value": 5 }, { "source": 63, "target": 48, "value": 5 }, { "source": 63, "target": 62, "value": 6 }, { "source": 63, "target": 57, "value": 2 }, { "source": 63, "target": 58, "value": 4 }, { "source": 63, "target": 61, "value": 3 }, { "source": 63, "target": 60, "value": 2 }, { "source": 63, "target": 55, "value": 1 }, { "source": 64, "target": 55, "value": 5 }, { "source": 64, "target": 62, "value": 12 }, { "source": 64, "target": 48, "value": 5 }, { "source": 64, "target": 63, "value": 4 }, { "source": 64, "target": 58, "value": 10 }, { "source": 64, "target": 61, "value": 6 }, { "source": 64, "target": 60, "value": 2 }, { "source": 64, "target": 59, "value": 9 }, { "source": 64, "target": 57, "value": 1 }, { "source": 64, "target": 11, "value": 1 }, { "source": 65, "target": 63, "value": 5 }, { "source": 65, "target": 64, "value": 7 }, { "source": 65, "target": 48, "value": 3 }, { "source": 65, "target": 62, "value": 5 }, { "source": 65, "target": 58, "value": 5 }, { "source": 65, "target": 61, "value": 5 }, { "source": 65, "target": 60, "value": 2 }, { "source": 65, "target": 59, "value": 5 }, { "source": 65, "target": 57, "value": 1 }, { "source": 65, "target": 55, "value": 2 }, { "source": 66, "target": 64, "value": 3 }, { "source": 66, "target": 58, "value": 3 }, { "source": 66, "target": 59, "value": 1 }, { "source": 66, "target": 62, "value": 2 }, { "source": 66, "target": 65, "value": 2 }, { "source": 66, "target": 48, "value": 1 }, { "source": 66, "target": 63, "value": 1 }, { "source": 66, "target": 61, "value": 1 }, { "source": 66, "target": 60, "value": 1 }, { "source": 67, "target": 57, "value": 3 }, { "source": 68, "target": 25, "value": 5 }, { "source": 68, "target": 11, "value": 1 }, { "source": 68, "target": 24, "value": 1 }, { "source": 68, "target": 27, "value": 1 }, { "source": 68, "target": 48, "value": 1 }, { "source": 68, "target": 41, "value": 1 }, { "source": 69, "target": 25, "value": 6 }, { "source": 69, "target": 68, "value": 6 }, { "source": 69, "target": 11, "value": 1 }, { "source": 69, "target": 24, "value": 1 }, { "source": 69, "target": 27, "value": 2 }, { "source": 69, "target": 48, "value": 1 }, { "source": 69, "target": 41, "value": 1 }, { "source": 70, "target": 25, "value": 4 }, { "source": 70, "target": 69, "value": 4 }, { "source": 70, "target": 68, "value": 4 }, { "source": 70, "target": 11, "value": 1 }, { "source": 70, "target": 24, "value": 1 }, { "source": 70, "target": 27, "value": 1 }, { "source": 70, "target": 41, "value": 1 }, { "source": 70, "target": 58, "value": 1 }, { "source": 71, "target": 27, "value": 1 }, { "source": 71, "target": 69, "value": 2 }, { "source": 71, "target": 68, "value": 2 }, { "source": 71, "target": 70, "value": 2 }, { "source": 71, "target": 11, "value": 1 }, { "source": 71, "target": 48, "value": 1 }, { "source": 71, "target": 41, "value": 1 }, { "source": 71, "target": 25, "value": 1 }, { "source": 72, "target": 26, "value": 2 }, { "source": 72, "target": 27, "value": 1 }, { "source": 72, "target": 11, "value": 1 }, { "source": 73, "target": 48, "value": 2 }, { "source": 74, "target": 48, "value": 2 }, { "source": 74, "target": 73, "value": 3 }, { "source": 75, "target": 69, "value": 3 }, { "source": 75, "target": 68, "value": 3 }, { "source": 75, "target": 25, "value": 3 }, { "source": 75, "target": 48, "value": 1 }, { "source": 75, "target": 41, "value": 1 }, { "source": 75, "target": 70, "value": 1 }, { "source": 75, "target": 71, "value": 1 }, { "source": 76, "target": 64, "value": 1 }, { "source": 76, "target": 65, "value": 1 }, { "source": 76, "target": 66, "value": 1 }, { "source": 76, "target": 63, "value": 1 }, { "source": 76, "target": 62, "value": 1 }, { "source": 76, "target": 48, "value": 1 }, { "source": 76, "target": 58, "value": 1 }] }
</script>
You can tamper the dx and dy to move it to the center something like this.
node.append("text")
.attr("dx", function(d) { if(d.group > 9) {return -5.5} else {return -1.5;} })
.attr("dy", ".3em")
.text(function(d) { return d.group });
What this does is if the group is 9 then single digit then return -1.5 else for 2 digit return -5.5.
Working code here
Hope this helps!
It works after changing the position of dx;
node.append("text")
.attr("dx", -2)
.attr("dy", ".35em")
.text(function(d) { return d.group });
Here is the updated fiddle.
I already spent way too much time on this. I have this aggregation that I can't get to work like it should.
I have a ton of documents with a structure like this (I've ommited some of the parts that aren't relevant for this agg):
{
"url": "THE_URL",
"url_params": {},
"title": "Het Nieuwsblad",
"referrer": null,
"time": "2015-08-25T08:35:15.729Z",
"referrerHost": null,
"timeOnSite": 16,
"blocks": [{
"viewTime": 11,
"click": 0,
"view": 1,
"block": "gentenaar__gentenaar-header"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "gentenaar__gentenaar-headline"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "gentenaar__gentenaar-top"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "gentenaar__gentenaar-top-left"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "gentenaar__gentenaar-top-right"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "gentenaar__gentenaar-right"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "gentenaar__gentenaar-sidebar"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "gentenaar__gentenaar-footer"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news"
}, {
"viewTime": 11,
"click": 1,
"view": 1,
"block": "news__breaking-news-1"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-2"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-3"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-4"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-5"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-6"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-7"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-sidebar-1"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-sidebar-2-left"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-sidebar-2-right"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-sidebar-3"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__breaking-news-footer"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-headline"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-head-1"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-head-2"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-head-3"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-head-4"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-head-5"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-head-6"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-1"
}, {
"viewTime": 0,
"click": 0,
"view": 0,
"block": "news__fast-news-2-left"
}, {
"viewTime": 0,
"click": 0,
"view": 0,
"block": "news__fast-news-2-right"
}, {
"viewTime": 0,
"click": 0,
"view": 0,
"block": "news__fast-news-3"
}, {
"viewTime": 0,
"click": 0,
"view": 0,
"block": "news__fast-news-4-left"
}, {
"viewTime": 0,
"click": 0,
"view": 0,
"block": "news__fast-news-4-right"
}, {
"viewTime": 0,
"click": 0,
"view": 0,
"block": "news__fast-news-5"
}, {
"viewTime": 0,
"click": 0,
"view": 0,
"block": "news__fast-news-6-left"
}, {
"viewTime": 0,
"click": 0,
"view": 0,
"block": "news__fast-news-6-right"
}, {
"viewTime": 1,
"click": 1,
"view": 1,
"block": "news__fast-news-right"
}, {
"viewTime": 0,
"click": 0,
"view": 0,
"block": "news__fast-news-bottom"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-sidebar-1"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-sidebar-2-left"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-sidebar-2-right"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-sidebar-3"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-sidebar-4-left"
}, {
"viewTime": 11,
"click": 0,
"view": 1,
"block": "news__fast-news-sidebar-4-right"
}, {
"viewTime": 1,
"click": 0,
"view": 1,
"block": "news__fast-news-sidebar-5"
}, {
"viewTime": 0,
"click": 0,
"view": 0,
"block": "news__fast-news-sidebar-6-left"
}, ...],
"activeAds": [{
"viewed": 1,
"clicked": 0,
"type": "button",
"width": 317,
"height": 75,
"timeViewed": 10
}, {
"viewed": 1,
"clicked": 0,
"type": "xlleaderboard",
"width": 990,
"height": 122,
"timeViewed": 10
}, ...]...
}
It's the blocks array that I'm having problems with. I want to know per block the sum of clicks, views and viewTime.
I'm trying to use this query:
{
"size": 0,
"query": {
"filtered": {
"query": {
"match_all": {}
},
"filter": {
"bool": {
"must": [
{
"range": {
"dt": {
"from": "2015-08-25T00:00:00+00:00",
"to": "2015-08-26T23:59:59+00:00"
}
}
},
{
"term": {
"url": "http://www.nieuwsblad.be/"
}
}
]
}
}
}
},
"aggs": {
"per_block": {
"term": {
"field": "blocks.blocks"
},
"aggs": {
"clicks": {
"sum": {
"field": "blocks.click"
}
}
}
}
}
}
For the activeAds, I'm using nearly identical code but there it's working perfectly:
{
"size": 0,
"query": {
"filtered": {
"query": {
"match_all": {}
},
"filter": {
"bool": {
"must": [
{
"range": {
"dt": {
"from": "2015-08-25T00:00:00+00:00",
"to": "2015-08-26T23:59:59+00:00"
}
}
},
{
"terms": {
"page.page_type": [
"home"
]
}
}
],
"must_not": {
"term": {
"activeAds.timeViewed": 0
}
}
}
}
}
},
"aggs": {
"per_ad": {
"terms": {
"field": "activeAds.type"
},
"aggs": {
"clicks": {
"sum": {
"field": "activeAds.clicked"
}
},
"views": {
"sum": {
"field": "activeAds.viewed"
}
},
"total_time_viewed": {
"sum": {
"field": "activeAds.timeViewed"
}
}
}
}
}
}
Anyone have any idea on what I'm doing wrong?
We have implemented stacked bar chart using amchart. We have displaying the top 5 selling products in the charts.When drill down charts, the product manufactures details will display on the chart.
You can use chart's event clickGraphItem when the user clicks on a column. Then dynamically update chart's dataProvider property and call validateData() method to take in new data.
Here's a complete working demo. It has more stuff in it than just what I mentioned above, like for instance updating labels of current level being displayed, as well as back button to go up a level in drill-down.
var chartData = [{
"category": 2009,
"income": 23.5,
"url":"#",
"description":"click to drill-down",
"months": [
{ "category": 1, "income": 1 },
{ "category": 2, "income": 2 },
{ "category": 3, "income": 1 },
{ "category": 4, "income": 3 },
{ "category": 5, "income": 2.5 },
{ "category": 6, "income": 1.1 },
{ "category": 7, "income": 2.9 },
{ "category": 8, "income": 3.5 },
{ "category": 9, "income": 3.1 },
{ "category": 10, "income": 1.1 },
{ "category": 11, "income": 1 },
{ "category": 12, "income": 3 }
]
}, {
"category": 2010,
"income": 26.2,
"url":"#",
"description":"click to drill-down",
"months": [
{ "category": 1, "income": 4 },
{ "category": 2, "income": 3 },
{ "category": 3, "income": 1 },
{ "category": 4, "income": 4 },
{ "category": 5, "income": 2 },
{ "category": 6, "income": 1 },
{ "category": 7, "income": 2 },
{ "category": 8, "income": 2 },
{ "category": 9, "income": 3 },
{ "category": 10, "income": 1 },
{ "category": 11, "income": 1 },
{ "category": 12, "income": 3 }
]
}, {
"category": 2011,
"income": 30.1,
"url":"#",
"description":"click to drill-down",
"months": [
{ "category": 1, "income": 2 },
{ "category": 2, "income": 3 },
{ "category": 3, "income": 1 },
{ "category": 4, "income": 5 },
{ "category": 5, "income": 2 },
{ "category": 6, "income": 1 },
{ "category": 7, "income": 2 },
{ "category": 8, "income": 2.5 },
{ "category": 9, "income": 3.1 },
{ "category": 10, "income": 1.1 },
{ "category": 11, "income": 1 },
{ "category": 12, "income": 3 }
]
}];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "/lib/3/images/",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"titles": [{
"text": "Yearly data"
}],
"dataProvider": chartData,
"startDuration": 1,
"graphs": [{
"alphaField": "alpha",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span> <br>[[description]]",
"dashLengthField": "dashLengthColumn",
"fillAlphas": 1,
"title": "Income",
"type": "column",
"valueField": "income","urlField":"url"
}],
"categoryField": "category",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"tickLength": 0
}
});
chart.addListener("clickGraphItem", function (event) {
if ( 'object' === typeof event.item.dataContext.months ) {
// set the monthly data for the clicked month
event.chart.dataProvider = event.item.dataContext.months;
// update the chart title
event.chart.titles[0].text = event.item.dataContext.category + ' monthly data';
// let's add a label to go back to yearly data
event.chart.addLabel(
"!10", 25,
"Go back to yearly >",
"right",
undefined,
undefined,
undefined,
undefined,
true,
'javascript:resetChart();');
// validate the new data and make the chart animate again
event.chart.validateData();
event.chart.animateAgain();
}
});
// function which resets the chart back to yearly data
function resetChart() {
chart.dataProvider = chartData;
chart.titles[0].text = 'Yearly data';
// remove the "Go back" label
chart.allLabels = [];
chart.validateData();
chart.animateAgain();
}
#chartdiv {
width : 100%;
height : 300px;
}
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>