D3.js - 在 Observablehq 中使用示例函数创建规范化堆叠条形图时出现问题
D3.js - Issue creating normalised stacked bar chart using example function on Obsevablehq
我在使用提供的功能时遇到问题：
https://observablehq.com/@d3/stacked-normalized-horizontal-bar
我传递给函数的数据采用用作示例的格式
{Airline: 'Virgin America', Sentiment: 'positive', Count: 11},
{Airline: 'Virgin America', Sentiment: 'neutral', Count: 8},
{Airline: 'Virgin America', Sentiment: 'negative', Count: 3},
{Airline: 'Delta', Sentiment: 'neutral', Count: 10}.....
数据本来就不是这个格式所以我用下面的代码处理成这个格式，这里是原来的dataset
for (object of data){
if (processed.length === 0){
processed.push({Airline: object.airline, Sentiment: object.airline_sentiment, Count: 1})
} else {
objIndex = processed.findIndex((obj => obj.Airline === object.airline && obj.Sentiment === object.airline_sentiment))
if (objIndex === -1){
processed.push({Airline: object.airline, Sentiment: object.airline_sentiment, Count: 1})
} else {
processed[objIndex].Count += 1
}
}
}
我还为 zDomain 值传递如下情绪数组
sentiment = ['positive', 'neutral', 'negative']
这是我在函数中使用的参数，与示例基本相同
chart = StackedBarChart(processed, {
x: d => d.Count,
y: d => d.Airline,
z: d => d.Sentiment,
yDomain: d3.groupSort(
processed,
D) => D[0].Count / d3.sum(D, d => d.Count),
d => d.Airline
),
colors: d3.schemeSpectral[sentiment.length],
zDomain: sentiment
)
在 StackedBarChar 函数中，我注意到变量系列变得未定义。这是定义这个的代码，我不完全理解。
// Compute a nested array of series where each series is [[x1, x2], [x1, x2],
// [x1, x2], …] representing the x-extent of each stacked rect. In addition,
// each tuple has an i (index) property so that we can refer back to the
// original data point (data[i]). This code assumes that there is only one
// data point for a given unique y- and z-value.
const series = d3.stack()
.keys(zDomain)
.value(([, I], z) => X[I.get(z)])
.order(order)
.offset(offset)
(d3.rollup(I, ([i]) => i, i => Y[i], i => Z[i]))
.map(s => s.map(d => Object.assign(d, {i: d.data[1].get(s.key)})));
错误信息也是
Uncaught TypeError: svg.append(...).selectAll(...).data(...).join is not a
function
at StackedBarChart (chart.js:132:8)
我认为这是由于未定义系列造成的。
这可能是什么原因造成的？我的数据格式一定有问题吗？
我无法重现您的问题。以下代码使用您链接的 Twitter 航空公司数据集成功绘制了规范化堆叠条形图。您使用的是什么版本的 D3？也许您使用的是没有 selection.join 函数的旧版本。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v7.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
d3.csv('Tweets.csv').then(drawChart);
function drawChart(data){
const processed = [];
for (object of data) {
if (processed.length === 0){
processed.push({Airline: object.airline, Sentiment: object.airline_sentiment, Count: 1})
} else {
objIndex = processed.findIndex((obj => obj.Airline === object.airline && obj.Sentiment === object.airline_sentiment))
if (objIndex === -1){
processed.push({Airline: object.airline, Sentiment: object.airline_sentiment, Count: 1})
} else {
processed[objIndex].Count += 1
}
}
}
const sentiment = ['positive', 'neutral', 'negative'];
const yDomain = d3.groupSort(
processed,
D => D[0].Count / d3.sum(D, d => d.Count),
d => d.Airline
);
const sbc = StackedBarChart(processed, {
x: d => d.Count,
y: d => d.Airline,
z: d => d.Sentiment,
yDomain: yDomain,
colors: d3.schemeSpectral[sentiment.length],
zDomain: sentiment
});
const div = document.getElementById('chart');
div.append(sbc);
}
// Copyright 2021 Observable, Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/stacked-normalized-horizontal-bar
function StackedBarChart(data, {
x = d => d, // given d in data, returns the (quantitative) x-value
y = (d, i) => i, // given d in data, returns the (ordinal) y-value
z = () => true, // given d in data, returns the (categorical) z-value
title, // given d in data, returns the title text
marginTop = 30, // top margin, in pixels
marginRight = 20, // right margin, in pixels
marginBottom = 0, // bottom margin, in pixels
marginLeft = 40, // left margin, in pixels
width = 640, // outer width, in pixels
height, // outer height, in pixels
xType = d3.scaleLinear, // type of x-scale
xDomain, // [xmin, xmax]
xRange = [marginLeft, width - marginRight], // [left, right]
yDomain, // array of y-values
yRange, // [bottom, top]
yPadding = 0.1, // amount of y-range to reserve to separate bars
zDomain, // array of z-values
offset = d3.stackOffsetExpand, // stack offset method
order = d3.stackOrderNone, // stack order method
xFormat = "%", // a format specifier string for the x-axis
xLabel, // a label for the x-axis
colors = d3.schemeTableau10, // array of colors
} = {}) {
// Compute values.
const X = d3.map(data, x);
const Y = d3.map(data, y);
const Z = d3.map(data, z);
// Compute default y- and z-domains, and unique them.
if (yDomain === undefined) yDomain = Y;
if (zDomain === undefined) zDomain = Z;
yDomain = new d3.InternSet(yDomain);
zDomain = new d3.InternSet(zDomain);
// Omit any data not present in the y- and z-domains.
const I = d3.range(X.length).filter(i => yDomain.has(Y[i]) && zDomain.has(Z[i]));
// If the height is not specified, derive it from the y-domain.
if (height === undefined) height = yDomain.size * 25 + marginTop + marginBottom;
if (yRange === undefined) yRange = [height - marginBottom, marginTop];
// Compute a nested array of series where each series is [[x1, x2], [x1, x2],
// [x1, x2], …] representing the x-extent of each stacked rect. In addition,
// each tuple has an i (index) property so that we can refer back to the
// original data point (data[i]). This code assumes that there is only one
// data point for a given unique y- and z-value.
const series = d3.stack()
.keys(zDomain)
.value(([, I], z) => X[I.get(z)])
.order(order)
.offset(offset)
(d3.rollup(I, ([i]) => i, i => Y[i], i => Z[i]))
.map(s => s.map(d => Object.assign(d, {i: d.data[1].get(s.key)})));
// Compute the default y-domain. Note: diverging stacks can be negative.
if (xDomain === undefined) xDomain = d3.extent(series.flat(2));
// Construct scales, axes, and formats.
const xScale = xType(xDomain, xRange);
const yScale = d3.scaleBand(yDomain, yRange).paddingInner(yPadding);
const color = d3.scaleOrdinal(zDomain, colors);
const xAxis = d3.axisTop(xScale).ticks(width / 80, xFormat);
const yAxis = d3.axisLeft(yScale).tickSizeOuter(0);
// Compute titles.
if (title === undefined) {
title = i => `${Y[i]}\n${Z[i]}\n${X[i].toLocaleString()}`;
} else {
const O = d3.map(data, d => d);
const T = title;
title = i => T(O[i], i, data);
}
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
const bar = svg.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("fill", ([{i}]) => color(Z[i]))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", ([x1, x2]) => Math.min(xScale(x1), xScale(x2)))
.attr("y", ({i}) => yScale(Y[i]))
.attr("width", ([x1, x2]) => Math.abs(xScale(x1) - xScale(x2)))
.attr("height", yScale.bandwidth());
if (title) bar.append("title")
.text(({i}) => title(i));
svg.append("g")
.attr("transform", `translate(0,${marginTop})`)
.call(xAxis)
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", width - marginRight)
.attr("y", -22)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(xLabel));
svg.append("g")
.attr("transform", `translate(${xScale(0)},0)`)
.call(yAxis);
return Object.assign(svg.node(), {scales: {color}});
}
</script>
</body>
</html>
我在使用提供的功能时遇到问题：
https://observablehq.com/@d3/stacked-normalized-horizontal-bar
我传递给函数的数据采用用作示例的格式
{Airline: 'Virgin America', Sentiment: 'positive', Count: 11},
{Airline: 'Virgin America', Sentiment: 'neutral', Count: 8},
{Airline: 'Virgin America', Sentiment: 'negative', Count: 3},
{Airline: 'Delta', Sentiment: 'neutral', Count: 10}.....
数据本来就不是这个格式所以我用下面的代码处理成这个格式，这里是原来的dataset
for (object of data){
if (processed.length === 0){
processed.push({Airline: object.airline, Sentiment: object.airline_sentiment, Count: 1})
} else {
objIndex = processed.findIndex((obj => obj.Airline === object.airline && obj.Sentiment === object.airline_sentiment))
if (objIndex === -1){
processed.push({Airline: object.airline, Sentiment: object.airline_sentiment, Count: 1})
} else {
processed[objIndex].Count += 1
}
}
}
我还为 zDomain 值传递如下情绪数组
sentiment = ['positive', 'neutral', 'negative']
这是我在函数中使用的参数，与示例基本相同
chart = StackedBarChart(processed, {
x: d => d.Count,
y: d => d.Airline,
z: d => d.Sentiment,
yDomain: d3.groupSort(
processed,
D) => D[0].Count / d3.sum(D, d => d.Count),
d => d.Airline
),
colors: d3.schemeSpectral[sentiment.length],
zDomain: sentiment
)
在 StackedBarChar 函数中，我注意到变量系列变得未定义。这是定义这个的代码，我不完全理解。
// Compute a nested array of series where each series is [[x1, x2], [x1, x2],
// [x1, x2], …] representing the x-extent of each stacked rect. In addition,
// each tuple has an i (index) property so that we can refer back to the
// original data point (data[i]). This code assumes that there is only one
// data point for a given unique y- and z-value.
const series = d3.stack()
.keys(zDomain)
.value(([, I], z) => X[I.get(z)])
.order(order)
.offset(offset)
(d3.rollup(I, ([i]) => i, i => Y[i], i => Z[i]))
.map(s => s.map(d => Object.assign(d, {i: d.data[1].get(s.key)})));
错误信息也是
Uncaught TypeError: svg.append(...).selectAll(...).data(...).join is not a
function
at StackedBarChart (chart.js:132:8)
我认为这是由于未定义系列造成的。
这可能是什么原因造成的？我的数据格式一定有问题吗？
我无法重现您的问题。以下代码使用您链接的 Twitter 航空公司数据集成功绘制了规范化堆叠条形图。您使用的是什么版本的 D3？也许您使用的是没有 selection.join 函数的旧版本。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v7.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
d3.csv('Tweets.csv').then(drawChart);
function drawChart(data){
const processed = [];
for (object of data) {
if (processed.length === 0){
processed.push({Airline: object.airline, Sentiment: object.airline_sentiment, Count: 1})
} else {
objIndex = processed.findIndex((obj => obj.Airline === object.airline && obj.Sentiment === object.airline_sentiment))
if (objIndex === -1){
processed.push({Airline: object.airline, Sentiment: object.airline_sentiment, Count: 1})
} else {
processed[objIndex].Count += 1
}
}
}
const sentiment = ['positive', 'neutral', 'negative'];
const yDomain = d3.groupSort(
processed,
D => D[0].Count / d3.sum(D, d => d.Count),
d => d.Airline
);
const sbc = StackedBarChart(processed, {
x: d => d.Count,
y: d => d.Airline,
z: d => d.Sentiment,
yDomain: yDomain,
colors: d3.schemeSpectral[sentiment.length],
zDomain: sentiment
});
const div = document.getElementById('chart');
div.append(sbc);
}
// Copyright 2021 Observable, Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/stacked-normalized-horizontal-bar
function StackedBarChart(data, {
x = d => d, // given d in data, returns the (quantitative) x-value
y = (d, i) => i, // given d in data, returns the (ordinal) y-value
z = () => true, // given d in data, returns the (categorical) z-value
title, // given d in data, returns the title text
marginTop = 30, // top margin, in pixels
marginRight = 20, // right margin, in pixels
marginBottom = 0, // bottom margin, in pixels
marginLeft = 40, // left margin, in pixels
width = 640, // outer width, in pixels
height, // outer height, in pixels
xType = d3.scaleLinear, // type of x-scale
xDomain, // [xmin, xmax]
xRange = [marginLeft, width - marginRight], // [left, right]
yDomain, // array of y-values
yRange, // [bottom, top]
yPadding = 0.1, // amount of y-range to reserve to separate bars
zDomain, // array of z-values
offset = d3.stackOffsetExpand, // stack offset method
order = d3.stackOrderNone, // stack order method
xFormat = "%", // a format specifier string for the x-axis
xLabel, // a label for the x-axis
colors = d3.schemeTableau10, // array of colors
} = {}) {
// Compute values.
const X = d3.map(data, x);
const Y = d3.map(data, y);
const Z = d3.map(data, z);
// Compute default y- and z-domains, and unique them.
if (yDomain === undefined) yDomain = Y;
if (zDomain === undefined) zDomain = Z;
yDomain = new d3.InternSet(yDomain);
zDomain = new d3.InternSet(zDomain);
// Omit any data not present in the y- and z-domains.
const I = d3.range(X.length).filter(i => yDomain.has(Y[i]) && zDomain.has(Z[i]));
// If the height is not specified, derive it from the y-domain.
if (height === undefined) height = yDomain.size * 25 + marginTop + marginBottom;
if (yRange === undefined) yRange = [height - marginBottom, marginTop];
// Compute a nested array of series where each series is [[x1, x2], [x1, x2],
// [x1, x2], …] representing the x-extent of each stacked rect. In addition,
// each tuple has an i (index) property so that we can refer back to the
// original data point (data[i]). This code assumes that there is only one
// data point for a given unique y- and z-value.
const series = d3.stack()
.keys(zDomain)
.value(([, I], z) => X[I.get(z)])
.order(order)
.offset(offset)
(d3.rollup(I, ([i]) => i, i => Y[i], i => Z[i]))
.map(s => s.map(d => Object.assign(d, {i: d.data[1].get(s.key)})));
// Compute the default y-domain. Note: diverging stacks can be negative.
if (xDomain === undefined) xDomain = d3.extent(series.flat(2));
// Construct scales, axes, and formats.
const xScale = xType(xDomain, xRange);
const yScale = d3.scaleBand(yDomain, yRange).paddingInner(yPadding);
const color = d3.scaleOrdinal(zDomain, colors);
const xAxis = d3.axisTop(xScale).ticks(width / 80, xFormat);
const yAxis = d3.axisLeft(yScale).tickSizeOuter(0);
// Compute titles.
if (title === undefined) {
title = i => `${Y[i]}\n${Z[i]}\n${X[i].toLocaleString()}`;
} else {
const O = d3.map(data, d => d);
const T = title;
title = i => T(O[i], i, data);
}
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
const bar = svg.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("fill", ([{i}]) => color(Z[i]))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", ([x1, x2]) => Math.min(xScale(x1), xScale(x2)))
.attr("y", ({i}) => yScale(Y[i]))
.attr("width", ([x1, x2]) => Math.abs(xScale(x1) - xScale(x2)))
.attr("height", yScale.bandwidth());
if (title) bar.append("title")
.text(({i}) => title(i));
svg.append("g")
.attr("transform", `translate(0,${marginTop})`)
.call(xAxis)
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", width - marginRight)
.attr("y", -22)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(xLabel));
svg.append("g")
.attr("transform", `translate(${xScale(0)},0)`)
.call(yAxis);
return Object.assign(svg.node(), {scales: {color}});
}
</script>
</body>
</html>