我应该根据具有以下结构的JSON文档生成一个报告:
tables:
[
{
<some descriptors of the dataset>,
series:
[
key: ...,
values:
[
{ label: ..., value: ... },
...
]
]
},
...
]
在JSON数组中,可以有任意数量的表,具有任意的序列。当然,每个系列都使用不同的值保存相同的一组值。对于每个表,我必须用给定的数据和多条图表绘制一张表。我选择NVD3.js作为我的图表库。
由于我对JavaScript不是很有经验,所以我决定谨慎行事,按照NVD3.js的例子写字母,并以最古老和最愚蠢的方式生成我需要的div和对象。只要我在JS中感觉更舒服,我就会实现模板等等。下面是我的JavaScript代码的简写版本。我知道这很可怕,所以请不要评判我。
var report_data = <stupid way of getting data, will use AJAX later>;
var my_div = document.getElementById('show-report');
report_data.tables.forEach(
function(table)
{
var newDiv = document.createElement('div');
newDiv.id = 'report_' + table.name;
var newHeader = document.createElement('h1');
newHeader.textContent = table.name;
newDiv.appendChild(newHeader);
// Generate style element for chart
var newStyle = document.createElement('style');
newStyle.textContent = '#' + table.name + '_chart svg {height: 500px;}';
newDiv.appendChild(newStyle);
// Generate <div><svg /></div> where chart will be placed
var chartDiv = document.createElement('div');
chartDiv.id = table.name + '_chart';
var svgEl = document.createElement('svg');
chartDiv.appendChild(svgEl);
newDiv.appendChild(chartDiv);
// Here I write the table and append it to the main div. Omitted because of intense shame.
my_div.appendChild(newDiv);
//Draw chart
nv.addGraph(
function()
{
var chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 30, right: 20, bottom: 50, left: 175})
.tooltips(true)
.showControls(true);
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#'+ table.name +'_chart svg')
.datum(table.series)
.transition().duration(250)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
}
);
}
);
所以,代码是坏的,但它有效.说大也大吧。事情是这样的:它试图绘制每个图表,并把它放在它的div中,但是每个图表只是以纯文本显示,没有样式。见这张音像专辑。如果我用我的一个表的名字“硬编码”一个div,它就会绘制图表,里面没有任何问题。在我看来,新创建的div似乎没有应用NVD3.js CSS文件。我甚至不知道这是否可能,因为我对CSS的了解甚至比JavaScript还少。
有没有人尝试过这样的行为,或者有人知道是什么导致了这种行为?
发布于 2014-05-07 00:53:55
我刚刚遇到了这个问题,在浏览了一下GitHub i 发现问题之后。
不能使用document.createElement创建SVG元素,必须使用document.createElementNS并为SVG指定xml名称空间,或者只需使用d3的附加方法:d3.select(.).append(“svg”)
我的问题特别涉及到jQuery,这导致我使用以下方法生成SVG元素:
var $svg = d3.select($jqElement[0]).append("svg")
对于非jQuery用户,常规DOM元素可以传递到d3.select
中。在本例中,调用$jqElement[0]
以获取jQuery对象的DOM版本。
https://stackoverflow.com/questions/22569367
复制相似问题