问题描述
我有一个项目，我需要在其中可视化带圆角的条形图。我使用 D3.JS 版本 6 创建了一个图表，并在网上找到了一些关于如何添加圆角的文档。但我似乎没有让代码工作。所有在线文档都遵循相同的原则。
最好的文档之一可以在这里找到：Documentation
.attr(
"d",item => `
M${x(item.name)},${y(item.value) + ry}
a${rx},${ry} 0 0 1 ${rx},${-ry}
h${x.bandwidth() - 2 * rx}
a${rx},${ry}
v${height - y(item.value) - ry}
h${-x.bandwidth()}Z
`
)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue"></script>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div class="p-3 flex flex-col" id="one">
<div class="w-full flex-1">
<div id="my_dataviz"></div>
</div>
</div>
<script>
new Vue({
el: '#one',data: {
type: Array,required: true,},mounted() {
var data = [
{ key: "One",value: 33 },{ key: "Two",value: 30 },{ key: "Three",value: 37 },{ key: "Four",value: 28 },{ key: "Five",value: 25 },{ key: "Six",value: 15 }
];
// set the dimensions and margins of the graph
var margin = { top: 20,right: 20,bottom: 30,left: 40 },width = 500 - margin.left - margin.right,height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3
.scaleBand()
.range([0,width])
.padding(0.1);
var y = d3.scaleLinear().range([height,0]);
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3
.select("#my_dataviz")
.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 + ")");
// format the data
data.forEach(function(d) {
d.value = +d.value;
});
// Scale the range of the data in the domains
x.domain(
data.map(function(d) {
return d.key;
})
);
y.domain([
0,d3.max(data,function(d) {
return d.value;
})
]);
//Defenining the tooltip div
let tooltip = d3
.select("body")
.append("div")
.attr("class","tooltip")
.style("position","absolute")
.style("top",0)
.style("left",0)
.style("opacity",0);
// append the rectangles for the bar chart
const rx = 12;
const ry = 12;
svg
.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class","bar")
.attr("x",function(d) {
return x(d.key);
})
.attr("width",x.bandwidth())
.attr("y",function(d) {
return y(d.value);
})
.attr("height",function(d) {
return height - y(d.value);
})
.attr("fill","#206BF3")
.attr(
"d",${ry}
v${height - y(item.value) - ry}
h${-x.bandwidth()}Z
`
)
.on("mouSEOver",(e,i) => {
d3.select(e.currentTarget).style("fill","red");
tooltip
.transition()
.duration(200)
.style("opacity",0.9);
tooltip
.html(
`<div><h1>${i.key} 2020</h1><p>${this.addPointsToEveryThousand(
i.value
)} kWh</p></div>`
)
.style("left",e.pageX + "px")
.style("top",e.pageY - 28 + "px");
})
.on("mouSEOut",e => {
d3.select(e.currentTarget).style("fill","#206BF3");
tooltip
.transition()
.duration(500)
.style("opacity",0);
});
// add the x Axis
svg
.append("g")
.attr("transform","translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the y Axis
svg.append("g").call(d3.axisLeft(y));
},methods: {
addPointsToEveryThousand(amount) {
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g,".");
}
}
});
</script>
</body>
</html>解决方法
您可以为矢量图形添加样式，也可以添加边框或对其进行更改。
请检查这是否是您要找的。p>
val auth = PhoneAuthOptions
.newBuilder(FirebaseAuth.getInstance())
.setPhoneNumber(phoneNumber)
.setTimeout(60L,TimeUnit.MILLISECONDS)
.setActivity(this)
.setCallbacks(object : PhoneAuthProvider.OnVerificationStateChangedCallbacks() {
override fun onVerificationCompleted(p0: PhoneAuthCredential) {
// here i want to get the smscode and send it over the next activity to verify
// but this method is not called at all
Intent(this,ChangePasswordActivity::class.java).apply {
putExtra("code",p0.smsCode)
startActivity(this)
}
}
override fun onVerificationFailed(p0: FirebaseException) {
Timber.d("Firebase Exception ${p0.message}")
}
override fun onCodeSent(code: String,p1: PhoneAuthProvider.ForceResendingToken) {
super.onCodeSent(code,p1)
}
override fun onCodeAutoRetrievalTimeOut(p0: String) {
super.onCodeAutoRetrievalTimeOut(p0)
}
})
.build()
PhoneAuthProvider.verifyPhoneNumber(auth)
我只添加了这个属性以使其工作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue"></script>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div class="p-3 flex flex-col" id="one">
<div class="w-full flex-1">
<div id="my_dataviz"></div>
</div>
</div>
<script>
new Vue({
el: '#one',data: {
type: Array,required: true,},mounted() {
var data = [
{ key: "One",value: 33 },{ key: "Two",value: 30 },{ key: "Three",value: 37 },{ key: "Four",value: 28 },{ key: "Five",value: 25 },{ key: "Six",value: 15 }
];
// set the dimensions and margins of the graph
var margin = { top: 20,right: 20,bottom: 30,left: 40 },width = 500 - margin.left - margin.right,height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3
.scaleBand()
.range([0,width])
.padding(0.1);
var y = d3.scaleLinear().range([height,0]);
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3
.select("#my_dataviz")
.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})`);
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y).ticks(5);;
// format the data
data.forEach(function(d) {
d.value = +d.value;
});
// Scale the range of the data in the domains
x.domain(
data.map(function(d) {
return d.key;
})
);
y.domain([
0,d3.max(data,function(d) {
return d.value;
})
]);
//Defenining the tooltip div
let tooltip = d3
.select("body")
.append("div")
.attr("class","tooltip")
.style("position","absolute")
.style("top",0)
.style("left",0)
.style("opacity",0);
// append the rectangles for the bar chart
const rx = 12;
const ry = 12;
svg
.selectAll(".bar")
.data(data)
.enter()
.append("path")
.attr("class","bar")
.attr("x",function(d) {
return x(d.key);
})
.attr("width",x.bandwidth())
.attr("y",function(d) {
return y(d.value);
})
.attr("height",function(d) {
return height - y(d.value);
})
.attr("fill","#206BF3")
.attr(
"d",item => `
M${x(item.key)},${y(item.value) + ry}
a${rx},${ry} 0 0 1 ${rx},${-ry}
h${x.bandwidth() - 2 * rx}
a${rx},${ry}
v${height - y(item.value) - ry}
h${-x.bandwidth()}Z
`
)
.on("mouseover",(e,i) => {
d3.select(e.currentTarget).style("fill","red");
tooltip
.transition()
.duration(200)
.style("opacity",0.9);
tooltip
.html(
`<div><h1>${i.key} 2020</h1><p>${this.addPointsToEveryThousand(
i.value
)} kWh</p></div>`
)
.style("left",e.pageX + "px")
.style("top",e.pageY - 28 + "px");
})
.on("mouseout",e => {
d3.select(e.currentTarget).style("fill","#206BF3");
tooltip
.transition()
.duration(500)
.style("opacity",0);
});
// add the x Axis
svg
.append("g")
.attr("transform","translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the y Axis
svg.append("g").call(d3.axisLeft(y));
},methods: {
addPointsToEveryThousand(amount) {
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g,".");
}
}
});
</script>
</body>
</html>
</body>
</html>