首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在动态创建的div上绘制多个NVD3.js图表的问题

在动态创建的div上绘制多个NVD3.js图表的问题
EN

Stack Overflow用户
提问于 2014-03-21 20:54:35
回答 1查看 1.2K关注 0票数 1

我应该根据具有以下结构的JSON文档生成一个报告:

代码语言:javascript
运行
复制
tables:
[
  {
    <some descriptors of the dataset>, 
    series: 
    [
      key: ...,
      values: 
        [
          { label: ..., value: ... },
          ...
        ]
    ]
  },
  ...
]

在JSON数组中,可以有任意数量的表,具有任意的序列。当然,每个系列都使用不同的值保存相同的一组值。对于每个表,我必须用给定的数据和多条图表绘制一张表。我选择NVD3.js作为我的图表库。

由于我对JavaScript不是很有经验,所以我决定谨慎行事,按照NVD3.js的例子写字母,并以最古老和最愚蠢的方式生成我需要的div和对象。只要我在JS中感觉更舒服,我就会实现模板等等。下面是我的JavaScript代码的简写版本。我知道这很可怕,所以请不要评判我。

代码语言: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还少。

有没有人尝试过这样的行为,或者有人知道是什么导致了这种行为?

EN

回答 1

Stack Overflow用户

发布于 2014-05-07 00:53:55

我刚刚遇到了这个问题,在浏览了一下GitHub i 发现问题之后。

不能使用document.createElement创建SVG元素,必须使用document.createElementNS并为SVG指定xml名称空间,或者只需使用d3的附加方法:d3.select(.).append(“svg”)

我的问题特别涉及到jQuery,这导致我使用以下方法生成SVG元素:

代码语言:javascript
运行
复制
var $svg = d3.select($jqElement[0]).append("svg")

对于非jQuery用户,常规DOM元素可以传递到d3.select中。在本例中,调用$jqElement[0]以获取jQuery对象的DOM版本。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22569367

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档