Question

我正在使用billboard.js来创建条形图。从过去两天开始，它显示错误（如下所示）。我找不到任何理由说明为什么会这样。

错误是：

d3.v4.min.js:2 Uncaught TypeError: t.getAttribute is not a function
    at new W (d3.v4.min.js:2)
    at V (d3.v4.min.js:2)
    at Z (d3.v4.min.js:2)
    at r.fn.init.<anonymous> (d3.v4.min.js:2)
    at pt.each (d3.v4.min.js:2)
    at pt.classed (d3.v4.min.js:2)
    at ChartInternal.initWithData (ChartInternal.js:242)
    at ChartInternal.init (ChartInternal.js:61)
    at new Chart (Chart.js:28)
    at Object.generate (core.js:52)
W @ d3.v4.min.js:2
V @ d3.v4.min.js:2
Z @ d3.v4.min.js:2
(anonymous) @ d3.v4.min.js:2
each @ d3.v4.min.js:2
classed @ d3.v4.min.js:2
initWithData @ ChartInternal.js:242
init @ ChartInternal.js:61
Chart @ Chart.js:28
generate @ core.js:52
createBarGraph @ reports.js:59
initialize @ reports.js:12
(anonymous) @ reports.js:90

我的 javascript函数用于图表生成如下（注意，我使用过去2周内的相同代码并且它正常运行，但现在代码相同显示错误）。

var app = {
    initialize: function() {
        const instance = this;

        var barGraphContainer = $("#barGraph");
        this.createBarGraph(barGraphContainer);
    },

    /**
     * Generates BarChart using generate function of billboard.js
     * 
     * @param {HTML Tag} graphElement
     */
    createBarGraph: function(graphElement) {
        // bar chart
        var barchart = bb.generate({
            data: {
                columns: [
                    ["Monthly Usage", 120, 230, 212, 180, 140, 170, 120, 230, 212, 180, 140, 170]
                ],
                type: "bar",
            },
            bar: {
                width: {
                    ratio: 0.3,
                    max: 300
                }
            },

            color: {
                pattern: ["#99ff66"]
            },

            axis: {
                x: {
                    type: "category",
                    // label: "Your X-axis",
                    categories: ["Jun'16","Jul'16","Aug'16","Sept'16","Oct'16","Nov'16", "Dec'16","Jan'17","Feb'17","Mar'17","Apr'17","May'17"]
                }
            },

            bindto: barGraphContainer
        });
    }
}

$(function() {
    app.initialize();
});

Answer 1

为迟到的回复道歉，但我已经找出了问题所在。

问题在于将图形数据绑定到变量（表示html页面上的图形div，这里是 graphElement ）。事实证明，人们不能将变量设置为＆＃34; bindto＆＃34;属性。

我的问题虽然已经解决了，但我真的想知道为什么我不能设置 bindto 属性的值与变量一样，就像我的情况一样。

Answer 2

@Sandeep，根据API bindto可以获得3种类型

as String：CSS选择器，用于选择绑定元素
as HTMLElement：bind元素的引用
as d3.selection：用d3

https://naver.github.io/billboard.js/release/latest/doc/Options.html#.bindto

如果能提供完整的工作代码，将会更清楚地澄清问题。

更新回答：

嗯......根据您的代码和您已经做过的评论，激进问题是由bind元素引用引起的。

所以，第一个问题是变量范围（你已经知道）。

但是还有另外一个问题。您正在使用jQuery选择#barGraph元素。当你使用jQuery进行选择时，它将返回用jQuery实例包装的元素。

正如我在本文前面所评论的那样，billboard.js可以接受三种不同类型的绑定元素。这意味着无法接受包装的jQuery元素。

因此，对于'bindto'选项，元素值应设置为： bindto: this.barGraphContainer[0]，它引用原始DOM元素而不是包装的jQuery元素。

查看以下工作演示。

var app = {
	barGraphContainer: null,
	initialize: function() {
		const instance = this;

		this.barGraphContainer = $("#barGraph");
		this.createBarGraph(this.barGraphContainer);
	},

	/**
	 * Generates BarChart using generate function of billboard.js
	 *
	 * @param {HTML Tag} graphElement
	 */
	createBarGraph: function(graphElement) {
		// bar chart
		var barchart = bb.generate({
			data: {
				columns: [
					["Monthly Usage", 120, 230, 212, 180, 140, 170, 120, 230, 212, 180, 140, 170]
				],
				type: "bar",
			},
			bar: {
				width: {
					ratio: 0.3,
					max: 300
				}
			},

			color: {
				pattern: ["#99ff66"]
			},

			axis: {
				x: {
					type: "category",
					// label: "Your X-axis",
					categories: ["Jun'16","Jul'16","Aug'16","Sept'16","Oct'16","Nov'16", "Dec'16","Jan'17","Feb'17","Mar'17","Apr'17","May'17"]
				}
			},

			bindto: this.barGraphContainer[0]  // or this.barGraphContainer.get(0)
		});
	}
}

$(function() {
	app.initialize();
});

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
</head>
<body>
<div id="barGraph"></div>
</body>
</html>

未捕获的TypeError：t.getAttribute不是函数

2 个答案: