首先,让我接受我是d3.js的新手。我相当习惯R。由于堆栈溢出社区和一些d3.js示例,我一直在d3.js中进行绘图。我遇到过r2d3作为连接R和d3.js绘图的一种方式,因此使用它来建立连接。
我已经在d3.js中创建了一个绘图,并希望将其与R Shiny输出连接。我可以将剧情连接到R Shiny。但是情节总是从闪亮的情节区域出来。
这是我的情节在R Shiny区域的外观:
My Existing d3 plot in R Shiny
要求您提出以下建议:
我的Ui.R代码如下:
column(d3Output("clplot"),width = 12)
我的服务器代码如下:
output$clplot <-r2d3::renderD3(
r2d3(data = cl_d3(),script="d3/cl_dilip_v1.js", d3_version = "5")
)
js代码如下:
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var jsondata = [{ "promotedprice": 100, "nonpromotedprice": 350, "avgprice": 230, "x_value": 80, "brand": "Brand1" }, { "promotedprice": 99, "nonpromotedprice": 170, "avgprice": 130, "x_value": 140, "brand": "Brand2" }, { "promotedprice": 47, "nonpromotedprice": 147, "avgprice": 80, "x_value": 200, "brand": "Brand3" }, { "promotedprice": 100, "nonpromotedprice": 250, "avgprice": 220, "x_value": 260, "brand": "Brand4" }, { "promotedprice": 99, "nonpromotedprice": 170, "avgprice": 130, "x_value": 320, "brand": "Brand5" }];
// Creating the colour Category
var color = d3.scaleOrdinal(d3.schemeCategory10);
// Creating the 1st Comapartment
var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 450);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Attach the Promoted Price Rectangle
var g = svg.selectAll("rect")
.data(data)
.enter()
.append("g")
.classed('rect', false)
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.x_value) + "<br/>" + d.nonpromotedprice);
//.style("left", (d3.event.pageX) + "px")
//.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function (d) {
div.transition()
.duration(0)
.style("opacity", 0);
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var accent = d3.scaleOrdinal(d3.schemeAccent);
// Line for the 1st Block
g.append("line") // attach a line
.style("stroke", "#E6EAEE")
.style("stroke-width", 17) // colour the line
.attr("x1", function (d) { return d.x_value; }) // x position of the first end of the line
.attr("y1", function (d) { return d.nonpromotedprice; }) // y position of the first end of the line
.attr("x2", function (d) { return d.x_value; }) // x position of the second end of the line
.attr("y2", function (d) { return d.promotedprice; });
// Promoted Price Rectangle for the 1st Block
g.append("rect")
.attr("width", 24)
.attr("height", 13)
.attr("x", function (d) { return d.x_value - 12; })
.attr("y", function (d) { return d.promotedprice; })
.attr("fill", function (d) { return color(d.x_value); })
// Non Promoted Price Rectangle for the 1st Block
g.append("rect")
.attr("width", 24)
.attr("height", 13)
.attr("x", function (d) { return d.x_value - 12; })
.attr("y", function (d) { return d.nonpromotedprice; })
.attr("fill", function (d) { return color(d.x_value); })
// Average Price Rectangle for the 1st Block
g.append("rect")
.attr("width", 24)
.attr("height", 13)
.attr("x", function (d) { return d.x_value - 12; })
.attr("y", function (d) { return d.avgprice; })
.attr("fill", function (d) { return color(d.x_value); });
// Graph X- Axis and Title Text for 1st svg
var y_scale = d3.scaleLinear()
//.domain([d3.min(function (d) { return d.promotedprice }), d3.max(function (d) { return d.nonpromotedprice; })])
.range([370, 0]);
var y_axis = d3.axisLeft()
.scale(y_scale);
y_scale.domain([0, d3.max(data, function (d) { return d.nonpromotedprice; })]).nice();
g.append("g")
.attr("class", "grid")
.attr("transform", "translate(0, 40)")
.attr("fill", "lightgrey")
.attr("stroke-width", 0.15)
.attr("stroke-opacity", 0.2)
//.attr("shape-rendering", crispEdges)
//stroke-opacity: 0.7;shape-rendering: crispEdges;
.call(y_axis
.tickSize(-420)
.tickFormat(""))
;
// PEPSICO AS-IS BRAND CALL OUT
g.append("rect")
.attr("width", 38)
.attr("height", 20)
.attr("x", function (d) { return d.x_value - 2; })
.attr("y", function (d) { return d.promotedprice; })
.attr("fill", function (d) { return color(d.x_value); })
.attr("transform", "translate(" + -15 + "," + -40 + ")");
g.append("text")
//.classed('rotation', true)
//.attr('x', (d,i)=> xScale(i))
.attr("x", function (d) { return d.x_value - 13; })
.attr("y", function (d) { return d.promotedprice - 28; })
.attr("dy", ".35em")
.text(function (d) { return d.brand; })
.style("font-family", "arial")
.style("font-size", 8)
.attr("stroke-width", 0.15)
.attr("fill", "white");
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
d3.select(this).select("rect").attr("y", d.y = d3.event.y);
//.attr("x", d.x = d3.event.x)
}
function dragended(d)
{
d3.select(this).classed("active", false);
}
答案 0 :(得分:0)
尝试删除部分代码:
var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 450);