如何解决D3JS + R - 无法显示数据
目前，我正在开发一个 R 闪亮的应用程序，我想在其中使用 D3js 可视化数据。因为我是 D3 的新手，所以我完成了创建条形图的教程。不幸的是，虽然我能够为 x 和 y 绘制轴，但我无法使绘图工作以显示我的数据。这是我的代码（我只发送我的 .js 文件，因为我的数据甚至无法显示在我的 R Studio 的预览窗口中）：
Histogram_Beispiel.js
// !preview r2d3 data=readr::read_tsv("Beispiel.tsv"),d3_version = "5",container = "div"
//r2d3: https://rstudio.github.io/r2d3,d3_version=3
// d3.tip
// Returns a tip
/* !preview r2d3 data=readr::read_tsv("Beispiel.tsv"),d3_version = "3",container = "div"*/
/* !preview r2d3 data=readr::read_tsv("Histogram_Data_Barplot.tsv"),container = "div" */
d3.tip = function() {
var direction = d3TipDirection,offset = d3TipOffset,html = d3TipHTML,rootElement = document.body,node = initNode(),svg = null,point = null,target = null;
function tip(vis) {
svg = getSVGNode(vis);
if (!svg) return;
point = svg.createSVGPoint();
rootElement.appendChild(node);
}
// Public - show the tooltip on the screen
//
// Returns a tip
tip.show = function() {
var args = Array.prototype.slice.call(arguments);
if (args[args.length - 1] instanceof SVGElement) target = args.pop();
var content = html.apply(this,args),poffset = offset.apply(this,dir = direction.apply(this,nodel = getNodeEl(),i = directions.length,coords,scrollTop = document.documentElement.scrollTop ||
rootElement.scrollTop,scrollLeft = document.documentElement.scrollLeft ||
rootElement.scrollLeft;
nodel.html(content)
.style('opacity',1).style('pointer-events','all');
while (i--) nodel.classed(directions[i],false);
coords = directionCallbacks.get(dir).apply(this);
nodel.classed(dir,true)
.style('top',(coords.top + poffset[0]) + scrollTop + 'px')
.style('left',(coords.left + poffset[1]) + scrollLeft + 'px');
return tip;
};
// Public - hide the tooltip
//
// Returns a tip
tip.hide = function() {
var nodel = getNodeEl();
nodel.style('opacity',0).style('pointer-events','none');
return tip;
};
// Public: Proxy attr calls to the d3 tip container.
// Sets or gets attribute value.
//
// n - name of the attribute
// v - value of the attribute
//
// Returns tip or attribute value
// eslint-disable-next-line no-unused-vars
tip.attr = function(n,v) {
if (arguments.length < 2 && typeof n === 'string') {
return getNodeEl().attr(n);
}
var args = Array.prototype.slice.call(arguments);
d3.selection.prototype.attr.apply(getNodeEl(),args);
return tip;
};
// Public: Proxy style calls to the d3 tip container.
// Sets or gets a style value.
//
// n - name of the property
// v - value of the property
//
// Returns tip or style property value
// eslint-disable-next-line no-unused-vars
tip.style = function(n,v) {
if (arguments.length < 2 && typeof n === 'string') {
return getNodeEl().style(n);
}
var args = Array.prototype.slice.call(arguments);
selection.prototype.style.apply(getNodeEl(),args);
return tip;
};
// Public: Set or get the direction of the tooltip
//
// v - One of n(north),s(south),e(east),or w(west),nw(northwest),// sw(southwest),ne(northeast) or se(southeast)
//
// Returns tip or direction
tip.direction = function(v) {
if (!arguments.length) return direction;
direction = v == null ? v : functor(v)
return tip;
};
// Public: Sets or gets the offset of the tip
//
// v - Array of [x,y] offset
//
// Returns offset or
tip.offset = function(v) {
if (!arguments.length) return offset;
offset = v == null ? v : functor(v)
return tip;
};
// Public: sets or gets the html value of the tooltip
//
// v - String value of the tip
//
// Returns html value or tip
tip.html = function(v) {
if (!arguments.length) return html;
html = v == null ? v : functor(v)
return tip;
};
// Public: sets or gets the root element anchor of the tooltip
//
// v - root element of the tooltip
//
// Returns root node of tip
tip.rootElement = function(v) {
if (!arguments.length) return rootElement;
rootElement = v == null ? v : functor(v)
return tip;
};
// Public: destroys the tooltip and removes it from the DOM
//
// Returns a tip
tip.destroy = function() {
if (node) {
getNodeEl().remove()
node = null;
}
return tip;
};
function d3TipDirection() { return 'n' }
function d3TipOffset() { return [0,0] }
function d3TipHTML() { return ' ' }
var directionCallbacks = d3.map({
n: directionnorth,s: directionSouth,e: directionEast,w: directionWest,nw: directionnorthWest,ne: directionnorthEast,sw: directionSouthWest,se: directionSouthEast
}),directions = directionCallbacks.keys();
function directionnorth() {
var bBox = getScreenBBox(this);
return {
top: bBox.n.y - node.offsetHeight,left: bBox.n.x - node.offsetWidth / 2
};
}
function directionSouth() {
var bBox = getScreenBBox(this);
return {
top: bBox.s.y,left: bBox.s.x - node.offsetWidth / 2
};
}
function directionEast() {
var bBox = getScreenBBox(this);
return {
top: bBox.e.y - node.offsetHeight / 2,left: bBox.e.x
};
}
function directionWest() {
var bBox = getScreenBBox(this);
return {
top: bBox.w.y - node.offsetHeight / 2,left: bBox.w.x - node.offsetWidth
};
}
function directionnorthWest() {
var bBox = getScreenBBox(this);
return {
top: bBox.nw.y - node.offsetHeight,left: bBox.nw.x - node.offsetWidth
}
}
function directionnorthEast() {
var bBox = getScreenBBox(this)
return {
top: bBox.ne.y - node.offsetHeight,left: bBox.ne.x
}
}
function directionSouthWest() {
var bBox = getScreenBBox(this)
return {
top: bBox.sw.y,left: bBox.sw.x - node.offsetWidth
}
}
function directionSouthEast() {
var bBox = getScreenBBox(this)
return {
top: bBox.se.y,left: bBox.se.x
}
}
function initNode() {
var div = d3.select(document.createElement('div'))
div
.style('position','absolute')
.style('top',0)
.style('opacity',0)
.style('pointer-events','none')
.style('Box-sizing','border-Box')
return div.node()
}
function getSVGNode(element) {
var svgNode = element.node()
if (!svgNode) return null
if (svgNode.tagName.toLowerCase() === 'svg') return svgNode
return svgNode.ownerSVGElement
}
function getNodeEl() {
if (node == null) {
node = initNode()
// re-add node to DOM
rootElement.appendChild(node)
}
return d3.select(node)
}
// Private - gets the screen coordinates of a shape
//
// Given a shape on the screen,will return an SVGPoint for the directions
// n(north),w(west),ne(northeast),se(southeast),// nw(northwest),sw(southwest).
//
// +-+-+
// | |
// + +
// | |
// +-+-+
//
// Returns an Object {n,s,e,w,nw,sw,ne,se}
function getScreenBBox(targetShape) {
var targetel = target || targetShape
while (targetel.getScreenCTM == null && targetel.parentNode != null) {
targetel = targetel.parentNode
}
var bBox = {},matrix = targetel.getScreenCTM(),tbBox = targetel.getBBox(),width = tbBox.width,height = tbBox.height,x = tbBox.x,y = tbBox.y
point.x = x
point.y = y
bBox.nw = point.matrixTransform(matrix)
point.x += width
bBox.ne = point.matrixTransform(matrix)
point.y += height
bBox.se = point.matrixTransform(matrix)
point.x -= width
bBox.sw = point.matrixTransform(matrix)
point.y -= height / 2
bBox.w = point.matrixTransform(matrix)
point.x += width
bBox.e = point.matrixTransform(matrix)
point.x -= width / 2
point.y -= height / 2
bBox.n = point.matrixTransform(matrix)
point.y += height
bBox.s = point.matrixTransform(matrix)
return bBox
}
// Private - replace D3JS 3.X d3.functor() function
function functor(v) {
return typeof v === 'function' ? v : function() {
return v
}
}
return tip
}
//d3----------------------------------
var margin = {top: 40,right: 20,bottom: 30,left: 40},/// width and height will be generated by R automatically. Removed parts: Numbers after width = xxx and height = xxx.
width = width - margin.left - margin.right,height = height - margin.top - margin.bottom;
var formatPercent = d3.format("");
var x = d3.scaleBand()
.rangeRound([0,width])
.padding(.1);
var y = d3.scaleLinear()
.rangeRound([height,0]);
var xAxis = d3.axisBottom()
.scale(x);
var yAxis = d3.axisLeft()
.scale(y)
// .tickFormat(formatPercent);
var tip = d3.tip()
.attr('class','d3-tip')
.offset([-10,0])
.html(function(d) {
return "<strong>SubCluster:</strong> <span style='color:red'>" + d.SubCluster + "</span>";
})
//R already created a SVG element. So we do not need to create it again. Removing the following part:
//d3.select("body")
var svg = div.append("svg")
.attr("width",width + margin.left + margin.right)
.attr("height",height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
// To make the data input dynamically,we would do this: Create .tsv file (only in this example)
// Then change the header to read this specific .tsv file
// r2d3.onRender = To read the data into r2d3.
r2d3.onRender(function(data,h,options) {
x.domain(data.map(function(d) { return d.DimensionName; }));
y.domain([0,d3.max(data,function(d) { return d.Amount;})]);
//d3.count(data,d => d.amount);
svg.append("g")
.attr("class","x axis")
.attr("transform","translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class","y axis")
.call(yAxis)
.append("text")
.attr("transform","rotate(-90)")
.attr("y",6)
.attr("dy",".71em")
.style("text-anchor","end")
.text("Occurence");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x",function(d) { return x(d.DimensionName); })
.attr("width",x.range())
.attr("y",function(d) { return y(d.Amount); })
.attr("height",function(d) { return height - y(d.Amount); })
.on('mouSEOver',tip.show)
.on('mouSEOut',tip.hide)
});
function type(d) {
d.Amount = +d.Amount;
return d;
}
Beispiel.tsv
DimensionName SubCluster Amount
f1 1,7,22 3
f10 15 1
f11 3,8,44 3
f12 36,42 2
f13 4,10,11,19,33,37,38 7
f14 29 1
f15 18 1
f16 9 1
f17 2 1
f18 13,14,35,40,41,44 6
f19 31 1
f2 34 1
f20 21 1
f3 19,30 2
f4 10,13,16,17,20,22,23,25,26,27,28 13
f5 4,12 2
f6 5,6,28,38,43,45 13
f7 3,36,39,45 7
f8 32 1
f9 24 1
有人可以帮助我或给我建议吗？如何使条形图正常工作？
编辑：共享 R. 文件（我只包括我调用 R2D3 对象的方式，因为文件很长）：
if (interactive()) {
ui <- [Code about navigation bar etc.]
body = argonDashBody(
argonTabItems(
argonTabItem(
tabName = "subcluster_analysis",fluidRow(
column(width = 8,argonTable(
cardWrap = FALSE,#title = "Barplots",headTitles = "Barplots",# width = 4,shinycssloaders::withSpinner(
d3Output(outputId = "out_barplotD3"))
)
),[...rest of the body...]
#### Server initiation ---------------------------------
server <- function(input,output,session){
[Server output]
#Barplot in D3.Js
output$out_barplotD3 <- renderD3({
r2d3(data = data,script= "Histogram_Beispiel.js",container = "div")
})
}
shinyApp(ui,server)
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
