I've posted this question in the Wordpress.org forum, but in case this isn't a WordPress-specific issue, I thought I'd post here as well.
I'm trying to insert an interactive Sankey chart, created with RCharts, into a WordPress page and am having some trouble figuring out why WP-D3 and my site are no longer on friendly terms: WordPress is inserting unwanted paragraph tags and breaks throughout my JavaScript.
Some extra context, if helpful: The WP-D3 has an interface for Visual Mode, but I create all of my posts in Text Mode (it makes editing in IE easier). I've used Text Mode in the past with success with D3 and NVD3. This situation has stumped me and I'm not sure if I've just overlooked something trivial or if there's something more complicated going on. I suspect the problem may have to do with the way WP is reading the call to the function in the first line, but am not sure.
Any solutions or suggestions that can point me in the right direction are very much appreciated!
Here's the page: http://ift.tt/1QEQNnq
Here's what I've attempted in terms of troubleshooting already:
-
Checked the JavaScript for accuracy (it was created with RCharts and tested on my PC)
-
Confirmed that the JavaScript files (d3.js and Sankey.js) are being called locally from the Media Library and that the element tags are listed between the [d3-link] tags.
-
Confirmed that all of the JavaScript code, copied directly from the RCharts template, is inserted between the [d3-source] tags.
-
Confirmed that the tag reference name matches the params element name (i.e., [d3-source canvas="sankey1"] )
-
Confirmed that the Raw HTML plugin's "Disable automatic paragraphs" box is checked and that the wpautopop filter is removed from the content in the theme's functions.php file.
remove_filter( 'the_content', 'wpautop' ); remove_filter( 'the_excerpt', 'wpautop' );
In the interest of completeness, here is the full page content (it's merely the RCharts template with my test data inserted):
[d3-link]
<script src="http://ift.tt/1WuTJdk"></script>
<script src="http://ift.tt/26Ary1l"></script>
[/d3-link]
[d3-source canvas="sankey1"]
//Attribution:
//Mike Bostock http://ift.tt/1azfduS
//Mike Bostock http://ift.tt/Lc0UCL
(function(){
var params = {
"dom": "sankey1",
"width": 960,
"height": 500,
"data": {
"source": [ "United States", "United States", "United States", "State", "State", "State", "person accused indicted or suspected of crime", "person accused indicted or suspected of crime", "alien person subject to a denaturalization proceeding or one whose citizenship is revoked", "attorney or person acting as such ", "water transportation stevedore", "person convicted of crime", "person convicted of crime", "person allegedly criminally insane or mentally incompetent to stand trial", "defendant", "defendant", "person subject to selective service including conscientious objector", "employee or job applicant including beneficiaries of", "employee or job applicant including beneficiaries of", "employer If employers relations with employees are governed by the nature of the employers", "employer If employers relations with employees are governed by the nature of the employers", "female employee or job applicant", "government contractor", "racial or ethnic minority employee or job applicant", "military personnel or dependent of including reservist", "owner landlord or claimant to ownership fee interest or possession of land as well as chattels", "indigent defendant", "prisoner inmate of penal institution", "prisoner inmate of penal institution", "prisoner inmate of penal institution", "person or organization protesting racial or ethnic segregation or discrimination", "person or organization protesting racial or ethnic segregation or discrimination", "railroad", "taxpayer or executor of taxpayers estate federal only", "union labor organization or official of", "union labor organization or official of", "witness or person under subpoena", "Department or Secretary of Labor", "National Labor Relations Board or regional office or officer", "National Labor Relations Board or regional office or officer" ],
"target": [ " State", " person accused indicted or suspected of crime", " person convicted of crime", " United States", " person accused indicted or suspected of crime", " person convicted of crime", " United States", " State", " United States", " United States", " employee or job applicant including beneficiaries of", " United States", " State", " State", " United States", " State", " United States", " employer If employers relations with employees are governed by the nature of the employers", " railroad", " employee or job applicant including beneficiaries of", " union labor organization or official of", " employer If employers relations with employees are governed by the nature of the employers", " United States", " employer If employers relations with employees are governed by the nature of the employers", " United States", " United States", " State", " governmental official or an official of an agency est under an interstate compact", " United States", " State", " city town township village or borough government or governmental unit", " State", " employee or job applicant including beneficiaries of", " United States", " employer If employers relations with employees are governed by the nature of the employers", " railroad", " United States", " employer If employers relations with employees are governed by the nature of the employers", " employer If employers relations with employees are governed by the nature of the employers", " union labor organization or official of" ],
"value": [ 12, 130, 31, 11, 151, 104, 232, 244, 20, 13, 22, 105, 218, 14, 33, 14, 22, 47, 51, 44, 30, 15, 12, 11, 20, 20, 17, 13, 12, 34, 15, 14, 17, 44, 39, 11, 34, 17, 68, 23 ]
},
"nodeWidth": 15,
"nodePadding": 10,
"layout": 32,
"id": "sankey1"
};
params.units ? units = " " + params.units : units = "";
//hard code these now but eventually make available
var formatNumber = d3.format("0,.0f"), // zero decimal places
format = function(d) { return formatNumber(d) + units; },
color = d3.scale.category20();
if(params.labelFormat){
formatNumber = d3.format(".2%");
}
var svg = d3.select('.sankey1').append("svg")
.attr("width", params.width)
.attr("height", params.height);
var sankey = d3.sankey()
.nodeWidth(params.nodeWidth)
.nodePadding(params.nodePadding)
.layout(params.layout)
.size([params.width,params.height]);
var path = sankey.link();
var data = params.data,
links = [],
nodes = [];
//get all source and target into nodes
//will reduce to unique in the next step
//also get links in object form
data.source.forEach(function (d, i) {
nodes.push({ "name": data.source[i] });
nodes.push({ "name": data.target[i] });
links.push({ "source": data.source[i], "target": data.target[i], "value": +data.value[i] });
});
//now get nodes based on links data
//thanks Mike Bostock http://ift.tt/1DsrFiq
//this handy little function returns only the distinct / unique nodes
nodes = d3.keys(d3.nest()
.key(function (d) { return d.name; })
.map(nodes));
//it appears d3 with force layout wants a numeric source and target
//so loop through each link replacing the text with its index from node
links.forEach(function (d, i) {
links[i].source = nodes.indexOf(links[i].source);
links[i].target = nodes.indexOf(links[i].target);
});
//now loop through each nodes to make nodes an array of objects rather than an array of strings
nodes.forEach(function (d, i) {
nodes[i] = { "name": d };
});
sankey
.nodes(nodes)
.links(links)
.layout(params.layout);
var link = svg.append("g").selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function (d) { return Math.max(1, d.dy); })
.sort(function (a, b) { return b.dy - a.dy; });
link.append("title")
.text(function (d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });
var node = svg.append("g").selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
.origin(function (d) { return d; })
.on("dragstart", function () { this.parentNode.appendChild(this); })
.on("drag", dragmove));
node.append("rect")
.attr("height", function (d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); })
.style("stroke", function (d) { return d3.rgb(d.color).darker(2); })
.append("title")
.text(function (d) { return d.name + "\n" + format(d.value); });
node.append("text")
.attr("x", -6)
.attr("y", function (d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function (d) { return d.name; })
.filter(function (d) { return d.x < params.width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
// the function for moving the nodes
function dragmove(d) {
d3.select(this).attr("transform",
"translate(" + (
d.x = Math.max(0, Math.min(params.width - d.dx, d3.event.x))
) + "," + (
d.y = Math.max(0, Math.min(params.height - d.dy, d3.event.y))
) + ")");
sankey.relayout();
link.attr("d", path);
}
})();
[/d3-source]
via
Chebli Mohamed
