I am trying to add radio buttons to an area with axis and shapes like this:
var triangleFunctions = ['Perpendicular Bisector', 'Median', 'Altitude'],
selected = 0;
var form = svg.append('form');
var labelEnter = form.selectAll('span')
.data(triangleFunctions)
.enter().append('span');
labelEnter.append('input').attr({
type: 'radio',
class: 'shape',
name: 'mode',
value: function(d, i) {return i;}
});
labelEnter.append("label").text(function(d) {return d;});
You can see a jsbin of the code here.
The labels and inputs are not appearing.
You can use foreignObject (but be aware that it does not work in IE):
var form = svg.append("foreignObject").attr("width", "400")
.attr("height", "50").append("xhtml:body").append('form');
Note that body tag is required, and it also has to contain xhtml: part.
Demo: http://jsbin.com/mafikorezo/edit?js,output
Related
So I would like to create a question flowchart like below:
Not sure where the best place to start is... Is this a Directed Graph?
Some of those end up being really spaced out and not looking great for 'flows' like so: https://observablehq.com/#d3/force-directed-graph
The best example I've seen is a non-D3 library (yworks) but it seems to cost $15k:
This is the only related StackOverflow I've seen which just references yworks: Can I create a flow chart (no tree chart) using D3.js
Maybe this dagre-d3 example as well:
http://jsfiddle.net/armyofda12mnkeys/9L50of2c/2/
var g = new dagreD3.graphlib.Graph().setGraph({});
Some cool optional stuff I'd like to add:
*I also want to be able to control the css on the Circles, like some will green some red in certain circumstances based on that node's data.
*Each Edge arrow I'd also like to add onHovers events, so a tooltip comes up to show the actual rule like 'if(Question1 == A || B)'
*Make the nodes/edges draggable or 'bouncy' (where they pop back to orig location if dragged). Sounds gimmicky, but sometimes users may use this feature if the rules get too cramped together (because of the smart auto-layout) and they wanna drag stuff to see what arrows point where.
I think I got it with dagre-d3.
Here is my initial jsfiddle:
http://jsfiddle.net/armyofda12mnkeys/4gv90qhx/2/
Also here is the same example with popups also on the edges (although I don't like the implementation as much as the node popups)
http://jsfiddle.net/armyofda12mnkeys/4gv90qhx/37/
and here is a full example of how I'm using in my project for a Diabetes Questionnaire (I upgraded the code to latest d3.v5+dagre, and made the nodes+edges draggable... lots of initial JSON parsing code to get into a format I can actually loop over, sorry bout that):
https://jsfiddle.net/armyofda12mnkeys/1burht5j/44/
Note: this last link may not work if 'cors-anywhere' website Im using is down. Try downloading it then.
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});
var nodes = [
{'qs_code':"QS1", 'hovertext': 'This is QS1', 'proto_logic_type': 'none' },
{'qs_code':"QS2", 'hovertext': 'This is QS2', 'proto_logic_type': 'disqualify'},
{'qs_code':"QS3", 'hovertext': 'This is QS3', 'proto_logic_type': 'qualify'},
{'qs_code':"QS4", 'hovertext': 'This is QS4', 'proto_logic_type': 'both'},
{'qs_code':"QS5", 'hovertext': 'This is QS5', 'proto_logic_type': 'none'},
{'qs_code':"QS6", 'hovertext': 'This is QS6', 'proto_logic_type': 'none'}
];
// Automatically label each of the nodes
nodes.forEach(function(node) {
g.setNode(node.qs_code, { label: node.qs_code, shape: "circle", class: [node.proto_logic_type], hovertext: node.hovertext }); //style: 'fill: red'
});
// Set up the edges
g.setEdge("QS1", "QS2", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA>BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule1</u>", hovertext:"A>B", labelType: "html" });
g.setEdge("QS1", "QS3", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA<BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule2</u>", hovertext:"A<B", labelType: "html" });
g.setEdge("QS1", "QS4", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA==BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule3</u>", hovertext:"A==B", labelType: "html" });
g.setEdge("QS2", "QS5", { label: "Rule1", arrowhead: "vee", hovertext:"(A+B)>1" });
g.setEdge("QS3", "QS5", { label: "Rule1", hovertext:"(A-B)<2" });
g.setEdge("QS3", "QS6", { label: "Rule2", hovertext:"(A*B)>=3" });
g.setEdge("QS4", "QS6", { label: "Rule2", arrowhead: "vee", hovertext:"(A>10)||(B<20)" });
var svg = d3.select("svg"),
inner = svg.select("g");
// Set the rankdir
g.graph().rankdir = 'TB';//'LR';
g.graph().nodesep = 50;
// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
inner.attr("transform", "translate(" + d3.event.translate + ")" +
"scale(" + d3.event.scale + ")");
});
svg.call(zoom);
// Create the renderer
var render = new dagreD3.render();
// Run the renderer. This is what draws the final graph.
render(inner, g);
var tooltip = d3.select("body")
.append("div")
.attr('id', 'tooltip_template')
.style("position", "absolute")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
.style("z-index", "10")
.style("visibility", "hidden")
.text("Simple Tooltip...");
inner.selectAll('g.node')
.attr("data-hovertext", function(v) {
return g.node(v).hovertext
})
.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){
tooltip.text( this.dataset.hovertext)
.style("top", (event.pageY-10)+"px")
.style("left",(event.pageX+10)+"px");
})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
inner.selectAll('g.edgePath')
//inner.selectAll('path')
.append('title').text('This is a line.');
// Center the graph
var initialScale = 0.75;
zoom
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
.scale(initialScale)
.event(svg);
svg.attr('height', g.graph().height * initialScale + 40);
I'm trying to make a static cubism chart like this http://bl.ocks.org/bae25/10797393
The csv file ("cubism_test.csv") looks something like this:
date,one,two,three,four,five
2018-06-01,132.54,18.44,68.36,0,56.63
2018-06-02,146.64,19.18,71.74,0,59.66
2018-06-03,160.77,117.98,75.15,0,62.71
2018-06-04,193.29,171.53,78.59,0,65.76
2018-06-05,275.92,78.64,82.05,0,68.82
<script>
// create context and horizon
var context = cubism.context()
.size(30)
.stop();
var horizon = context.horizon()
.extent([0,2]);
d3.csv("cubism_test.csv", function(data)
{
var format = d3.time.format("%Y-%m-%d");
data.forEach(function(d, i)
{
d.date = format.parse(d.date);
d.one= +d.one;
d.two= +d.two;
d.three= +d.three;
d.four= +d.four;
d.five= +d.five;
})
console.log(data);
// define metric accessor
context.metric(function(start,stop,step,callback)
{
var values = data;
console.log(values);
callback(null, values);
}, name);
d3.select("#graph").selectAll(".horizon")
.data(data)
.enter()
.append("div")
.attr("class", "horizon")
.call(horizon);
// set rule
d3.select("#body").append("div")
.attr("class", "rule")
.call(context.rule());
// set focus
context.on("focus", function(i) {
d3.selectAll(".value")
.style( "right", i == null ? null : context.size() - i + "px");
});
// set axis
var axis = context.axis()
d3.select("#graph").append("div").attr("class", "axis").append("g").call(axis);
});
</script>
Obviously this isn't working, but I don't know to fix it. I can't find a proper recourse on how to work with d3 data. The ones I've found are very basic and tell you how to use data to make simple circles, but not time series.
I don't know how to tell d3 to use the column headers as names or get it to use the values in the columns as the values for each cubism/horizon chart.
Your advice would be highly appreciated.
I want to filter data in the table based on the age and height at the same time using 2 range sliders.
I have implemented 2 range sliders (Age and Height) using d3.slider.js and a dc.dataTable. I want to use these 2 range sliders at the same time, but it seems that they are not working properly.
Also, under the table, there is the text "49 selected out of 49 records". The numbers are not changing while using the sliders.
Code:
var dataTable = dc.dataTable("table#list");
var dispatch = d3.dispatch('load','filter');
d3.json('data.json',function(json){
dispatch.load(json)
});
dispatch.on('load',function(json) {
var formatNumber = d3.format( ",d");
var facts = crossfilter(json);
var dimensionAge = facts.dimension(function(d) {
return +d.age;
});
var accessorAge = function(d) {
return d.age;
};
var dimensionHeight = facts.dimension(function(d) {
return +d.height;
});
var accessorHeight = function(d) {
return d.height;
};
var range = d3.extent(json, accessorAge);
var range2 = d3.extent(json, accessorHeight);
var all = facts.groupAll();
d3.select("div#slider3")
.call(d3.slider().axis(true).min(range[0]).max(range[1]).value(range)
.on("slide", function(evt,value) {
dispatch.filter(value);
d3.select("#slider3textmin").text(Math.floor(value[0]));
d3.select("#slider3textmax").text(Math.floor(value[1]))
}))
d3.select("div#slider4")
.call(d3.slider().axis(true).min(range2[0]).max(range2[1]).value(range2)
.on("slide", function(evt,value) {
dispatch.filter(value);
d3.select("#slider4textmin").text(Math.floor(value[0]));
d3.select("#slider4textmax").text(Math.floor(value[1]))
}))
FieldNames = [
"",
"Age",
"Weight",
"Height",
"Eye Color",
"Hair Color",
"Race",
"Sex",
"Annual Income"
];
d3.select("tr#FieldNames").selectAll("th")
.data(FieldNames)
.enter()
.append("th")
.append("text")
.text(function(d){
return d;
});
dataTable
.dimension(dimensionAge)
.group(function(d) {
return d.sex;
})
.columns([
function(d) {return "";},
function(d) {return d.age;},
function(d) {return d.weight;},
function(d) {return d.height;},
function(d) {return d.eyeColor;},
function(d) {return d.hairColor;},
function(d) {return d.race;},
function(d) {return d.sex;},
function(d) {return formatNumber(d.annualIncome);}
]);
dispatch.on('filter',function(value){
dataTable.replaceFilter(dc.filters.RangedFilter(value[0], value[1]));
dataTable.redraw();
})
dc.dataCount(".dc-data-count")
.dimension(facts)
.group(all);
dc.renderAll();
});
Link to the website
Plunker
Original response on the dc.js users group.
Nice use of d3.slider.js - I haven't seen that used with dc.js before.
At a quick glance, I see two problems here. First, you're using one
dispatch for both sliders, so both sliders are filtering the age,
since that's the dimension of the table. You'd probably want to create
another dimension for filtering by height, and you don't really need
to attach that to a chart.
Second, instead of just redrawing the chart with dataTable.redraw(),
you probably want to call dataTable.redrawGroup() so that all charts
in its chart group get redrawn, including the dataCount.
Specifically:
you'll need two filter events in your dispatch
var dispatch = d3.dispatch('load','filterAge','filterHeight');
the age slider will call filterAge
dispatch.filterAge(value);
and the height slider will call filterHeight
dispatch.filterHeight(value);
the current filter event handler will now handle filterAge and it will call redrawGroup
dispatch.on('filterAge',function(value){
dataTable.replaceFilter(dc.filters.RangedFilter(value[0], value[1]));
dataTable.redrawGroup();
})
we add another filterHeight handler which directly filters dimensionHeight and also redraws the chart group
dispatch.on('filterHeight',function(value){
dimensionHeight.filter([value[0], value[1]]);
dataTable.redrawGroup();
})
Reset All will also have to clear dimensionHeight. (Since this dimension isn't used by any chart, dc.filterAll() won't find it.)
Reset All
Fork of your plunker.
this for reset all, the 49 selected out of 49 records already change correcly
replace this
Reset All
to this
Reset All
add this after dispatch on load
dispatch.on('load',function(json) {
//your code
})
function sololo(){
//table
dispatch.filterAge([0,100]);
dispatch.filterHeight([0,100]);
//text slider
d3.select("#slider4textmin").text(0)
d3.select("#slider4textmax").text(0)
d3.select("#slider3textmin").text(0);
d3.select("#slider3textmax").text(0)
//slider
d3.select('#slider3').select('#handle-one').style('left','0%')
d3.select('#slider3').select('#handle-two') .style('right','0%')
d3.select('#slider3').select('div').style('left','0%').style('right','0%')
d3.select('#slider4').select('#handle-one').style('left','0%')
d3.select('#slider4').select('#handle-two') .style('right','0%')
d3.select('#slider4').select('div').style('left','0%').style('right','0%')
}
I want to add an image in nvd3 piechart legend instead of text.
I have this code but it changes only the text in the tooltip with the image. I want to change and the text in the legend with the same image.
var testdata = [
{
key: "<img src="+"./imgs/facebook.jpg"+">",
y: 1
},
{
key: ""<img src="+"./imgs/twitter.jpg"+">"",
y: 2
} ];
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.key})
.labelThreshold(.08)
.showLabels(true)
.color(d3.scale.category10().range())
.donut(true);
chart.pie.donutLabelsOutside(true).donut(true);
d3.select("#mypiechart")
.datum(testdata)
.transition().duration(1200)
.call(chart);
return chart;});
Any ideas?
This is not currently possible with nvd3.js. The tooltip works because the img element you have specified is being set into a div that isn't contained within the svg element. It doesn't work for the legend or chart labels because those are built using svg text elements. In order to show an image within the chart svg we'd need to use an svg image element.
We could build the svg image elements if we hack the nvd3.js code. Here's an outline of what you could do to get the legend working. You could then decide if you'd want to try something similar in the nv.models.pie code for the chart labels or if you'd just want to set chart.showLabels to false in your chart configuration.
Add a new key in your data to provide the image path:
var testdata = [
{
key: "<img src="+"./imgs/facebook.jpg"+">",
y: 1,
image_path: "./imgs/facebook.jpg"
},
{
key: "<img src="+"./imgs/twitter.jpg"+">",
y: 2,
image_path: "./imgs/twitter.jpg"
} ];
Update the nv.models.legend code to show the image:
seriesEnter.append('circle')
.style('stroke-width', 2)
.attr('class','nv-legend-symbol')
.attr('r', 5);
// Add an svg image into the legend
seriesEnter.append('image')
.attr('xlink:href', function(d) { return d.image_path} )
.attr('height',20)
.attr('width',20)
.attr('y', '-10')
.attr('x', '8');
Update the nv.models.legend code to not show the key:
// Don't add the key value into the legend text
//series.select('text').text(getKey);
Update the nv.models.legend code to consider the image width when determining the legend layout:
//seriesWidths.push(nodeTextLength + 28); // 28 is ~ the width of the circle plus some padding
//Include image width...
seriesWidths.push(nodeTextLength + 48);
I want to use a dataset to create a set of radio buttons and mark a specific one as default. There are two issues:
First, the text is aligned to the left of the radio button, but it is customary to see it to the right, in HTML like this:
<form><label><input type="radio"...> First label<input...></label>
I've tried using D3 on the labels collection to place the label text after I've set the input tag, but this appears to over-write the input tags.
Second, the default button is indicated with just an unqualified attribute name, "checked" or "selected". I've tried this in the final line of code, but it doesn't appear to work.
This is the code as it stands now, with associated JSFiddle.
var shapeData = ["Arrow", "Cross", "Hexagon", "Star", "Triangle"],
j = 3; // Choose the star as default
// Create the shape selectors
var form = d3.select("body").append("form");
labels = form.selectAll("label")
.data(shapeData)
.enter()
.append("label")
.text(function(d) {return d;})
.append("input")
.attr({
type: "radio",
class: "shape",
name: "mode",
value: function(d, i) {return i;}
})
.attr(function(d, i) {return i==j?"selected":null;});
First, to get the label/input ordered correctly, you should avoid nesting the input inside the label. So, instead you can insert a div or span on enter and then add the label and the input inside the span like so:
var labelEnter = form.selectAll("span")
.data(shapeData)
.enter().append("span");
labelEnter.append("input")
.attr({
type: "radio",
class: "shape",
name: "mode",
value: function(d, i) {return i;}
})
.property("checked", function(d, i) {
return (i===j);
});
labelEnter.append("label").text(function(d) {return d;});
While this is a bit of a cheat, I believe it's the only way to do what you want here. I don't think there's any way to specify where text is appended in relation to the children of an element in D3. If you were adding elements as children, you could use append() vs insert() to specify whether to append to the end of the list of children or to insert at the beginning. Maybe adding a similar capability for text (if possible) would be a worthwhile pull request to submit to D3.
Now, this also addresses the second question, which is to set the "selected" element, you want to use the d3 selection.property() function, which is made for setting the non-attribute attributes on dom elements. Also, you want to use "checked", not "selected" as the attribute being set:
.property("checked", function(d, i) {
return (i===j);
});
Check out this Fiddle: http://jsfiddle.net/reblace/YyuY4/9/
A simpler version that avoids using the span and so does it in one step, using D3's insert instead of append.
labels = form.selectAll("label")
.data(shapeData)
.enter()
.append("label")
.text(function(d) {return d;})
.insert("input")
.attr({
type: "radio",
class: "shape",
name: "mode",
value: function(d, i) {return i;}
})
.property("checked", function(d, i) {return i===j;});