尝试在Google Data Studio中构建散点图自定义可视化。忙于创建比例尺和轴。帮助我创建绘图的比例尺和轴。
请注意：-已从myViz.js文件中删除d3.min.js，dscc.min.js库，以使其可读
我已经在Google Cloud Platform中创建了以下文件，并一直参考http://bl.ocks.org/weiglemc/6185069来构建散点图。
Google云平台上的文件
manifest.json，myViz.css，myViz.json，myViz.js
https://imgur.com/fJyh71C（有关图形的外观，请参考下图）
Data Studio自定义可视化的问题在于我无法使用文件中的传统d3代码，而不得不依靠纯香草Java脚本进行编码。
我已经能够从以下文件中提取数据（谷物名称，卡路里和蛋白质）
https://docs.google.com/spreadsheets/d/1daWp7XM7PJbDLjkXxdVAeVtPem6HJfFEIYRSesQKbpI/edit?usp=sharing
但是我不确定如何在图表上进行缩放。以下代码可帮助我绘制比例尺和轴，但我需要与代码等效的javascript。
// setup x
var xValue = function(d) { return d.Calories;}, // data -> value
xScale = d3.scale.linear().range([0, width]), // value -> display
xMap = function(d) { return xScale(xValue(d));}, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
// setup y
var yValue = function(d) { return d["Protein (g)"];}, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");
你们能帮忙获取代码吗？我粘贴了工作代码，最终导致了散点图，如上图所示。
manifest.json
{
"name": "My Visualizations",
"organization": "MyOrg",
"description": "My first visualization package.",
"logoUrl": "https://logo",
"organizationUrl": "https://url",
"supportUrl": "https://url",
"privacyPolicyUrl": "https://url",
"termsOfServiceUrl": "https://url",
"packageUrl": "https://url",
"supportUrl": "https://url",
"devMode": true,
"components": [
{
"name": "myViz",
"description": "My first Community Visualization",
"iconUrl": "https://url",
"resource": {
"js": "gs://peekri/myViz.js",
"config": "gs://peekri/myViz.json",
"css": "gs://peekri/myViz.css"
}
}
]
}
myViz.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "barDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "barMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 2
}
}
]
}
],
"style": [
{
"id": "color",
"label": "Colors",
"elements": [
{
"type": "FONT_COLOR",
"id": "barColor",
"label": "Bar Color",
"defaultValue": "black"
}
]
}
]
}
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}
myViz.js
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = {
top: 10,
bottom: 50,
right: 10,
left: 10
};
const padding = {
top: 15,
bottom: 15
};
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
const fillColor = data.style.barColor.value ?
data.style.barColor.value.color :
data.style.barColor.defaultValue;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let xlargestMetric = 0;
let ylargestMetric = 0;
rowData.forEach(function(row) {
xlargestMetric = Math.max(xlargestMetric, row["barMetric"][0]);
});
rowData.forEach(function(row) {
ylargestMetric = Math.max(ylargestMetric, row["barMetric"][1]);
});
console.log(xlargestMetric);
console.log(ylargestMetric);
rowData.forEach(function(row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
met2: row["barMetric"][1],
dimId: data.fields["barDimension"][0].id
};
/*// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;*/
// create the "circle"
let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("r", 3.5);
circle.setAttribute("cx", barData["met"]);
circle.setAttribute("cy", barData["met2"]);
circle.style.fill = fillColor;
/*rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
// use style selector from Data Studio
rect.style.fill = fillColor;*/
svg.appendChild(circle);
/* // add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);*/
});
document.body.appendChild(svg);
}
dscc.subscribeToData(drawViz, {
transform: dscc.objectTransform
});
答案 0 :(得分：0)
Data Studio自定义可视化的问题是我无法 使用文件中的传统d3代码，并且必须依靠纯 普通的Java脚本进行编码。
您实际上可以通过几种不同的方式将d3.js与社区可视化结合使用：
您可以将d3.js源代码复制/粘贴或串联到可视化JavaScript中。与代码实验室的step 4类似，其中dscc.min.js和myVizSource.js串联在一起，您也可以将d3.min.js串联到最终的可视化JavaScript中。
您可以在此处使用webpack / npm heatmap example之类的东西将其捆绑到源中。
或者，如果您想在没有可视化库的情况下构建比例尺/轴（我不推荐）。